Stinger5ではすぐにFontAwesomeが使えるようになっているので、
楽々カスタマイズできます。
見出しにFontAwesomeアイコンをつけてみる
FontAwesomeって何？という方は、
私の以前の投稿をどうぞ。
WEBアイコンのFont Awesomeを活用しよう。Stinger5ならすぐ使えます。
沢山かわいらしいアイコンがあって、
どれを選べばよいか迷いますね。
おすすめを紹介してくれているサイトがあるので、
合わせてどうぞ。
よく使うFontAwesomeの日本語まとめ作ってみたよ。コード検索とかに手こずったりするので参考にしてみてね！
見出しタグのCSS内に、
FontAwesomeのアイコン情報を埋め込んでおきます。
そうすれば、
見出しを投稿で使うだけで、
自動的にCSSが読み込まれるからです。
個別でphp内にタグを入力するより楽ちんです。
という訳で、コードです。
CSSのコードです。
.post h3:before {
content: "/f02b";
font-family: FontAwesome;
font-size: 20px;
color: #666;
position:relative;
top:2px;
margin-left:2px;
margin-right:3px;
}
このコードは、
投稿記事内のh3のみに適用するコードです。
.post というのがついてますからね。
全てのh3に適用させたい時は、
.post ではなく、
h3:before { …
}
というコードの箇所に追加します。
他にもh4、h5にも使ってみるといいですね。
また、HTMLやphp内に直接貼り付けるタグとしても使えます。
一例：
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<i class="fa fa-tag">ここに文字を入力、しなくても良い</i>
沢山のアイコンがあるので、
イメージに合わせて使いこなしましょう。
参考にしたサイト
STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する
WordPressテーマ STINGERのフォントサイズや見出しをオリジナルに変更する方法
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク