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
自称、学習系ブロガー。自ら学び、学んだことをわかりやすく楽しくアウトプットすることを心がけています。本ブログではプログラミング、フリーランスの税金、Webマーケティング、副業を勉強していきます。
好きな映画は「メリーに首ったけ」
>>Twitterをフォローする
