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

Sponsored Link


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

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

 

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ファイルの、contentプロパティの値を変更すればいいのですね。下の例でいうと「\f05a」になりますね。

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

 

爆弾のアイコン(f1e2)

爆弾のコードは「f1e2」。

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

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

具ああああああ

 

 

メモ(f044)

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

としてやれば、

はい、ここメモ〜

 

 

とり(f2b2)

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

としてやると、

はい、とり〜

 

 

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

以上が補足情報を挿入する方法でした。

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

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

AddQuickTag

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

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

 

それでは!

Lin

飯橋凛(Ihashi Lin)

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


Sponsored Link

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



もう1本読んでみる