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




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

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

 

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

インフォメーション

 

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

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

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

 

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

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

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

みたいだったのです。

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

 

Step1. FontAwesomeを有効にする

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

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

<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の最下行に次のコードを書き加えてみます。

.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」と設定したので、

<div class="information">具ああああああ</div>

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

 

 

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

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

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

アイコンの種類を変更することで色々なコーナーを作り出せるのです。

なにせ、FontAwesomeには「iマーク」以外にもアイコンが存在していますからね。

 

アイコンの種類を変更する時はCSSファイルの、contentプロパティの値を変更すればいいのですね。下の例でいうと「\f05a」になりますね。

.information::before{
  content: '\f05a';
}

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

 

爆弾のアイコン(f1e2)

爆弾のコードは「f1e2」。

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

.information::before{
  content: '\f1e2';
}

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

具ああああああ

 

 

メモ(f044)

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

.information::before{
  content: '\f044';
}

としてやれば、

はい、ここメモ〜

 

 

とり(f2b2)

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

.information::before{
  content: '\f2b2';
}

としてやると、

はい、とり〜

 

 

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

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

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

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

AddQuickTag

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

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

 

それでは!

Lin




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。