sponsord link


◯最近の上條さん
上條晴行の一言
上條晴行の一言
Sponsored link

WordPressで便利なタグやコードまとめ|上條サロン

WordPressで便利なタグやコードまとめ|上條サロン

WordPressで使うと便利なタグやコード

WordPressは多種多様なタグやコードがあります。
さて今回はそんな使うと便利タグコードのまとめです。

タグやコードを使うことによってできることは

・装飾を自分なりにカスタマイズする
・導線を貼りやすくする

ここらへんですが、

デメリットもあります。

WordPressのコードやタグのメリット・デメリット

WordPressにおいてのコードやタグのメリット・デメリットを最初にまとめておきましょう。

■メリット
メリットは、自分なりにカスタマイズしてくれる点
これに尽きます。
人と同じWordPressテーマを使っていたとしても
自分メディアらしくカスタマイズできてしまう。

またコンバージョン率を上げるために導線も貼りやすい。
これは試行錯誤やGAを活用して実際にどういう経路で閲覧者がサイトを視ているのか?
これをチェックする上でも有効な手段と言えるでしょう。

■デメリット
SEO的にマイナスになることも!
コードをCSSから追加などすると、基本的にコードが乱れます。
それはともすると、「WEBページ速度」を遅くすることにもつながりますし、
似た命令を複数のコードでチグハグに出すと、エラーにもなりかねません。

僕自身がやってしまった失敗ケースとしては、

・過去設定したコードでは動かなったので、そのコードを消さずに新たなコードを記述して誤作動
・バックアップを取り忘れてからコードいじりエラーで後悔。

ここらへんは注意していかなくてはなりません。

さて、とりあえずは、メリット・デメリットは以上ですが、

いよいよ使えるコードについてのまとめいきます。

※コードやタグについては様々な仕様がありますが、
自分がわかる範囲のことを今回は記載していきます。

WordPressで使えるコード

WordPressで使えるコードです。
まずは、コードを人に教えたい時に超役立つ「サンプルコード」をWordPress本文に表記できるプラグインからご紹介していきましょう。

僕も使っていますが、「Crayon Syntax Highlighter」というプラグインが非常に便利です。

WordPressサンプルコードがきれいに貼れるCrayon Syntax Highlighter

WordPressのhタグ装飾コード

さて、hタグ装飾コードです。

・吹き出し型見出し装飾
WordPressのhタグ装飾コード

.sample2 {
    position: relative;
    color: #ffffff;
    background: #000000;
    font-size: 16pt ;
    border: 3px solid #f46e50;
    margin: 10px 10px 23px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:1px 3px 7px 0px  #666666 ;
}
.sample2:after, .sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.sample2:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #000000;
}
.sample2:before {
    left: 37px; 
    border: 13px solid transparent;
    border-top: 13px solid #f46e50;
}

記事本文には

ここに文字

▶この”sample2”の部分は自分なりに変更しても可能です。

・リボン型見出しコード
WordPressのhタグ装飾コード

.sample2 {
    position: relative;
    color: #ffffff ;
    background: #000000;
    font-size: 16pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #666666 ;
    border-top:3px solid #4df8ad;
}
.sample2:after, sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.sample2:after {
    left: 0;
    border-right: 5px solid #333;
}
.sample2:before {
    right: 0;
    border-left: 5px solid #333;
}

・上部ライン
WordPressのhタグ装飾コード

.sample2 {
  color: #ffffff ;
  background: #000000;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
    box-shadow:1px 3px 7px 0px #666666 ;
    border-top:3px solid #f46e50;
    border-radius: 5px ;
}

ちなみに自分このみに色を変更するには↓ここを変更します。
WordPressのhタグ装飾コード

・下部ライン
WordPressのhタグ装飾コード

.sample2 {
  color: #ffffff ;
  background: #000000;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
	box-shadow:1px 3px 7px 0px #666666 ;
	border-bottom:3px solid #f46e50;
	border-radius: 5px ;
}

・上下ライン
WordPressのhタグ装飾コード

.sample2 {
  color: #ffffff ;
  background: #000000;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
	box-shadow:1px 3px 7px 0px #666666 ;
	border-top:3px solid #f46e50;
	border-bottom:3px solid #f46e50;
	border-radius: 5px ;
}

WordPressで便利なタグ

次にWordPressで便利なタグです。
タグについては、「AddQuicktag」というプラグインを使用して登録しておくと非常に便利です。

今回は僕がよく使っているタグをご紹介していきます。

・下線

 ここのに文字

・二重下線

ここに文字

・サンプルコードを見せるタグ

ここにコード

・テーブル

ここに文字

このくらいですかね?

ちなみにコードやタグじゃないですが、「speech bubble」ていうプラグイン、使い勝手が良くて好きです。

ライター:上條

◯松本市ドッグサロンkiki
松本市でイチオシのドッグサロンといえば 松本市ドッグサロンkiki


◯乗鞍高原のおすすめ宿泊施設はこちら!
WordPressのおすすめテーマはこちら
■ポケモンGOにおすすめ
モバイルバッテリーダンボー
上條イチオシはこちら。
とにかくやすいし、かわいい。
かわいいのがいいの!っていう女の子には
iPhone 6なら3.5回フル充電可能。


■ポケモンGOに最適Wi-Fi
僕も1日3~4時間はポケモンGOしてますが、
Wi-Fiの電池も十分持つし
月額2760円~なので、月末の通信制限を心配しなくて
助かってます。

この記事を読んだ人はこんなのも高確率で読んでます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

ラジオ かみじょー

かみじょー:こちらのブログのライター・ラジオDJ・イベンター・web制作・writerをしております。 どうぞ、よろしくお願い致します。 取材・原稿依頼もお待ちしております。 ■得意なジャンル ・ゲームアプリ ・恋愛 ・採用 ・大学生 ・各種レビュー などです。