この記事を読むのに必要な時間は約 6 分です。
こんにちは、トッド（Todd）です。
見出しの先頭にアイコンが表示されている他ブログやサイトを拝見していると(いいなぁ～)と思う気持ちが抑えられなくなったので挑戦してみることにしました。
という事で、今回は「見出しｈ３の先頭にアイコン表記をつけてみよう！」
それでは、参ります
ほとんどの人がこのサイトを利用しているのではないかぁ～？と思うぐらいに調べていくと
この「Font Awesome」というサイトの存在を知っていくことになりました。
ですので、このサイトを使って作っていこうと思います。
初心者の方でも分かりやすいようにSTINGER8の標準見出しｈ３のCSSを利用して作成してみます。
[ad#ad-1]
１．header.php(テーマヘッダー)にコードを貼り付けよう
というわけで、Wordpress管理画面から「外観」→「テーマの編集」へ進みます。
そして、新規のタブを開いて「Font Awesome」のサイトへGOしましょう。
「Get Start」と書かれているボタンがメニューバーの所にあるのでクリックします。
すると、以下のようなページが出てきます。
ここから、もう少し下の方へスクロールをしてもらうと次にこの画面が出現します。
↓
この部分に書かれている
link rel="stylesheet" href="path/to/font-awesome.min.cssをコピーして先ほどの「テーマの編集」画面に戻ってもらいテーマヘッダーのheader.phpの<head>~</head>の中にペーストして貼り付けてください。
オススメの分かりやすい部分は、タグコードの上あたりに貼ると良いです。
これで作業一つ目は完了です。
２.見出しｈ３にアイコンが表示されるようにCSSを変更しよう
１、の作業が終わったので後は、CSSコードを変更するだけで終わりです。
今回は、例として以下のアイコンを使おうと思います。
このアイコンを見出しｈ３に持ってくるために、これからCSSを触りますが、自サイトの子テーマを編集するようにしましょう。
STINGER8の標準的なｈ３のstyle.sheetのコードはこんな感じです。↓
.post h3 {
font-size: 18px;
line-height: 27px;
margin: 20px 0;
padding: 10px 15px;
color: #1a1a1a;
line-height: 27px;
background-repeat: no-repeat;
background-position: left center;
border-bottom: 1px #999999 dotted;
}
h3 a {
color: #333;
text-decoration: none;
}
dd h3 {
line-height: 23px;
}
dd h3 a {
color: #333;
text-decoration: none;
font-size:16px;
}【.post h3{からh3 aの間に】以下のコードをぶち込んでください。↓
.post h3:before {
color: #ffd800;
margin-right: 10px;
font-family: "FontAwesome";
content: "\f14a";
font-size: 25px;colorを変更することでアイコンの色を変更することが出来るので好きな色にしてみて下さい。
contentに書かれているのがこのアイコンのことです。必ずバックスラッシュ打ち込んでください。
f14aは、このアイコン場合のUnicodeになりますので、自分が決めたアイコンのUnicodeを記さないと表記されないので注意しましょう。
以上で作業は完了しました。ここに書いてある通りにするとこのようなアイコン付きのh3見出しが完成しました。↓
こんな感じの仕上がりになります
さいごに、
STINGER8をテーマにしている方々へはこの説明で伝わったでしょうか？他のテーマで運用されている方でも大きな設定の違いは無いと思うので参考になればうれしく思います。
ｈ３で今回設定をしてみましたが、他にもアイコン表示をしたいと思う部分にも活用することが出来る内容になっているはずなので変更してみてはいかがでしょうか。
最後まで読んでいただき有難うございました
それでは、このへんで
