WordPressのブログで補足情報を挿入したい！
どうも、Linです。サクサク、カリカリです。
WordPressのいけているブログをみていると、次のような表現を目にすることが増えてきました。
こ、これはなんだろう・・・・
むちゃくちゃいいじゃないか・・・・
俺も導入したいよ・・・・
っていうことで、インターネットで調べてみたところ、こちらの神記事に遭遇。
この記事に載っている方法を利用すれば、
CSSを編集してdiv要素を記事内にぶち込むだけで補足情報を挿入できる
みたいだったのです。
早速、その方法を忘れないうちにまとめておきますね。
Step1. FontAwesomeを有効にする
アイコンの表示にFontAwesomeを利用するので、まずはこいつを有効化しなければなりません。
有効化の方法は、<head>タグ内に次のコードを挿入すればおっけー。
|
1 |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous"> |
WordPressの場合ですと、いじるべきファイルはheader.php。
このファイルでheadタグの記述がされているので、そちらにこの一文をぶち込めばいいですね。
テーマによってはもともとFontAwesomeが有効になっているものがあるのでこれは時と場合によりけりです。
Step2. CSS追加
次はサイトのデザインを司るCSSを編集。WordPressのstyle.cssの最下行に次のコードを書き加えてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.information{ background-color: #F4F3EB; padding: 20px 20px 20px 72px; border-radius: 4px; position: relative; display: block; margin-top: 1em; margin-bottom: 1em; } .information::before, .bomb::before, .memo::before, .bird::before { font-family: "FontAwesome"; font-size: 50px; position: absolute; top: 30px; left: 13px; color: #EAE3B4; } .information::before{ content: '\f05a'; } |
Step3. div要素を記事内に挿入
あとは補足情報を表示するコードを記事内に加えればオッケー。
今回は補足情報枠のクラス名を「information」と設定したので、
|
1 |
<div class="information">具ああああああ</div> |
をWordPressのテキスト編集モードで挿入すればいいですね。
補足情報のFontAwesomeのアイコンを変更したい！
と、以上がWordPressで記事中に補足情報を挿入する方法でした。
もちろん、御察しの通り、
アイコンの種類を変更することで色々なコーナーを作り出せるのです。
なにせ、FontAwesomeには「iマーク」以外にもアイコンが存在していますからね。
アイコンの種類を変更する時はCSSファイルの、contentプロパティの値を変更すればいいのですね。下の例でいうと「\f05a」になりますね。
|
1 2 3 |
.information::before{ content: '\f05a'; } |
「’ ‘」に囲まれたコードを変更すればいいのです。
爆弾のアイコン（f1e2）
爆弾のコードは「f1e2」。
CSSの最後の部分を次のように編集してやると、
|
1 2 3 |
.information::before{ content: '\f1e2'; } |
はい、爆弾の出来上がり〜
メモ（f044）
メモっぽいアイコンは「f044」。
|
1 2 3 |
.information::before{ content: '\f044'; } |
としてやれば、
とり（f2b2）
とりっぽいアイコンは「f2b2」。
|
1 2 3 |
.information::before{ content: '\f2b2'; } |
としてやると、
さあ、WordPressの記事内に補足情報を入れてみよう！
以上が補足情報を挿入する方法でした。
この方法ではFontAwesomeを使っているのでアイコンの種類を変えられるのが面白いですね。
ただ、毎回記事中にdiv要素を打ち込むのはめんどくさいので、
AddQuickTag
というプラグインを使うとこの作業が捗るようです。
次回はこのプラグイン「AddQuickTag」使い方をまとめていきますね。
それでは！
Lin
おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。
ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。
質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。
コメントを残す