【Diver】FontAwesomeを使ったアイコンメニューの作り方

2019年11月4日 2020年5月2日

shin

shin

Diverで、SANGOやJINのようなポップなアイコンメニューを作れないだろうか。Diverのヘッダーボタンをうまくカスタマイズすればできるんじゃないかな。

ダイバーは、とてもユーザー回遊率が優れたWordPressテーマです。

しかし、僕的にはどうしてもSANGOやZINのようなポップなアイコンメニューを設置したいと思っていました。

そこでダイバーのお問い合わせで、連絡してみたところ。「アイコンメニュー」の作り方を教えて頂けたので、アイコンメニューの作り方をシェアしようと思います。

もちろん、先方様には了承済みです。

ぜひ、アイコンメニューを作成して、ユーザーの回遊率を上げていきましょう！

Diverの公式ページはこちら

1 【Diver】FontAwesomeを使ったアイコンメニューの作り方
- 1.1 記述するHTMLとCSSのコード
- 1.2 HTMLのカスタマイズ方法
2 アイコンメニューを実際に設置してみる
3 まとめ

スポンサードリンク

【Diver】FontAwesomeを使ったアイコンメニューの作り方

今回、紹介するCSSとHTMLを記述すると上記のようなアイコンメニューが作れます。それでは、どのような手順かを説明します。

アイコンメニューを作る手順

CSSを「追加CSS」に記述
HTMLを任意の場所に記述
自分好みにカスタマイズ

アイコンメニューに必要なCSSとHTMLのコードを下記に置いて、ありますので、そちらをWordPressにそれぞれ場所に記述してください。

カスタマイズ方法も書いてありますので、順番に応じて参考にしてください。

記述するHTMLとCSSのコード

注意

先に「親テーマ」で、ダイバーを使っている方は、バージョンアップの際にコードが書き換わってしまう恐れがあるので、「子テーマ」を使い、子テーマのCSSに追加コードすることをオススメします。

下記のCSSコードを追加CSSに書き込みます。

CSS（クリックで表示）

/** アイコンメニュー **/
.widget_btn{
margin:-10px;
background:#eee;
display: flex;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.widget_btn a{
text-align:center;
width:50%;
padding:8px 0 12px;
background:#fff;
border:1px solid #eee;
font-weight:bold;
}

.widget_btn a i {
display:block;
font-size:24px;
padding:10px 0 6px;
}

.widget_btn a span {
font-size:12px;
}

/** アイコンの色 **/
.widget_btn a:nth-child(1) i {
color:#000;
}
.widget_btn a:nth-child(2) i {
color:#000;
}
.widget_btn a:nth-child(3) i {
color:#000;
}
.widget_btn a:nth-child(4) i {
color:#000;
}

親テーマを使っている人は、親テーマの追加CSSにCSSを入力してください。

CSSの入力が終わったら、アイコンメニューを表示したい部分に下記のHTMLを書き込みます。

<div class="widget_btn">
<a href="###"><i class="fa fa-camera" style="color: #696969;"></i>GoPro</a>
<a href="###"><i class="fa fa-map-marker" style="color: #f08080;"></i>旅行記</a>
<a href="###"><i class="fa fa-plane" style="color: #ffb776;"></i>旅ハック</a>
<a href="###"><i class="fa fa-photo" style="color: #77d477;"></i>台湾ひとり旅</a>
<a href="###"><i class="fa fa-wordpress" style="color: #4169e1;"></i>ブログ運営術</a>
</div>

上記のHTMLは、僕の実際に使っているHTMLコードになりますので、あなたのブログに合わせてカスタマイズする必要です。

HTMLのカスタマイズ方法

<a href="###">

アイコンのページ先のURLは、###の部分に任意のページのURLを入力します。

i class="###"

アイコンメニューのアイコンを変更するには、「i class="###"」の部分の###を任意のAwesome Fontの文字コードを指定します。

style="color: ###;"

アイコンのカラーを変更する場合は、「style="color: ###;"」の部分の###を指定する必要があります。

指定するアイコン（Font Awesome）の探し方

ダイバーでは、「Font Awesome 4.7」が搭載されています。

Font Awesomeとは、無料で利用可能なWebフォントです。現在は、「Font Awesome 5」にバージョンアップしていますが、ダイバーでは、「Font Awesome 4.7」が使われているため、4.7バージョンのFont Awesomeの文字コードを指定する必要があります。

https://fontawesome.com/v4.7.0/icons/

上記のサイトは、「Font Awesome 4.7」のアイコンフォントを探せるので、お気に入りのアイコンメニューのアイコンを探してみてください。

メニューアイコンを探したら、文字コードをコピーして、「i class="###"」の###部分に貼り付ければ、アイコンメニューに反映されます。

文字コードの指定のやり方

お気に入りのアイコンを見つけたら、クリックすると上記のようなページに移動します。

文字コードが表記されているので、その文字コードを指定して、アイコンメニューのHTMLに記述すれば、反映されます。

<span class="sc_content_icon" style="color: #ccc; font-size: 30px;"><i class="fa fa-camera-retro" aria-hidden="true"><span>fa-camera-retro</span></i></span>

青文字をコピペすれば、上記のアイコンのようにアイコンメニューに反映されます。