【WordPress/CSS】FontAwesomeを使って補足情報を挿入する方法

Sponsored Link


WordPressのブログで補足情報を挿入したい!

どうも、Linです。サクサク、カリカリです。

 

WordPressのいけているブログをみていると、次のような表現を目にすることが増えてきました。

インフォメーション

 

こ、これはなんだろう・・・・

むちゃくちゃいいじゃないか・・・・

俺も導入したいよ・・・・

 

っていうことで、インターネット上の情報を調べてみたところ、こちらの神記事に遭遇。

この記事に載っている方法を利用すれば、

WordPressのCSSを編集してdiv要素を記事内に打ち込むだけで補足情報を挿入できる

みたいだったのです。

早速、その方法を試してみましたのでその方法を忘れないうちにまとめておきますね。

 

Step1. FontAwesomeを有効にする

アイコンの表示にFontAwesomeを利用するのでまずはこいつを有効化しなければなりません。

有効化の方法は、<head>タグ内に次のコードを挿入すればおっけー。

WordPressの場合ですと、多くのテーマでheader.phpというファイルにheadタグの記述がされているので、そちらにこいつをぶち込めばいいですね。

テーマによってはもともとFontAwesomeが有効になっているものがあるのでこれは時と場合によりけりです。

 

Step2. CSS追加

次はサイトのデザインを司るCSSを編集。WordPressのstyle.cssの最下行に次のコードを書き加えてみます。

 

Step3. div要素を記事内に挿入

あとはこの補足情報を表示するコードを記事内に書き加えれば結構です。

今回は補足情報枠のクラス名を「information」と設定したので、

をWordPressのテキスト編集モードで記載すればいいですね。

ただ、ぼくだけかもしれませんが、これだと補足情報のボックスが崩れてしまいます。

具ああああああ

そういう時は、clearfixクラスをつけたしておくと、

具ああああああ

うん、これでしっかりと表示されてますね。

 

 

補足情報のFontAwesomeのアイコンを変更したい!

と、以上がWordPressで記事中に補足情報を挿入する方法でした。

もちろん、御察しの通り、

アイコンの種類を変更することで補足情報以外のコーナーを作り出すことだってできちゃうのです。

なにせ、FontAwesomeには「iマーク」以外にも数えきれぬぐらいアイコンの種類が存在していますからね。

 

アイコンの種類を変更する時はCSSファイルの、

の「’ ‘」に囲まれたコードを変更すればいいのです。

 

爆弾のアイコン(f1e2)

爆弾のコードは「f1e2」。

CSSの最後の部分を次のように編集してやると、

 

はい、爆弾の出来上がり〜

具ああああああ

 

 

メモ(f044)

メモっぽいアイコンは「f044」。

としてやれば、

 

はい、ここメモ〜

 

 

とり(f2b2)

とりっぽいアイコンは「f2b2」。

としてやると、

はい、とり〜

 

 

さあ、WordPressの記事内に補足情報を入れてみよう!

以上がFontAwesomeのアイコンとWordPressのCSS編集による補足情報を挿入する方法でした。

この方法ではFontAwesomeを使っているのでアイコンの種類をいとも簡単にも変えられるのが面白いですね。

ただ、毎回記事中にdiv要素を打ち込むのはめんどくさいので、

AddQuickTag

というプラグインを使うとこの作業が捗るようです。

次回はこのプラグインの使い方をまとめていきますね。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる