飯橋凛（いいはし りん）

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




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

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

 

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

インフォメーション

 

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

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

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

 

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

寝ログ
 
ブログ記事に補足情報を入力するためのスタイルシート
https://nelog.jp/expanded-information-css
ブログに補足情報を効果的に入れることができれば、読者により伝わりやすくなるかと思います。

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

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マーク」以外にもアイコンが存在していますからね。

fontawesome.com
 
Font Awesome 5 Icons
https://fontawesome.com/icons?d=gallery
All of the Free and Pro icons available in Font Awesome 5

 

アイコンの種類を変更する時は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」使い方をまとめていきますね。

FREE SWORDER
タグ付けが3倍速！WordPressのプラグイン「AddQuickTag」の使い方・設定方法
https://freesworder.net/wordpress-addquicktag
WordPressのタグ付けの作業が便利になる「AddQuickTag」の使い方どうも、Linです。ピーマン、リピートしてます。 WordPressで記事作成をする際に発生する作業として、特定タグ付けというものがありますよね？ 例えば、「あかいぜ」という文字をクラス名「red」のdiv要素で囲いたい場合は、投稿の編集画面を「テキストモード」に変更し、<div class="red">あかいぜ</div>と手打ちでかかねばなりません。  divとか打つのめんどくさいですし、いちいち半角に切り替えないといけませんから厄介...

 

それでは！

Lin

おすすめ記事よかったらもう1記事どうぞ




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

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

チェックする



コメントを残す

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