
ダイバーは、とてもユーザー回遊率が優れたWordPressテーマです。
しかし、僕的にはどうしてもSANGOやZINのようなポップなアイコンメニューを設置したいと思っていました。
そこでダイバーのお問い合わせで、連絡してみたところ。「アイコンメニュー」の作り方を教えて頂けたので、アイコンメニューの作り方をシェアしようと思います。
もちろん、先方様には了承済みです。
ぜひ、アイコンメニューを作成して、ユーザーの回遊率を上げていきましょう!
目次
【Diver】FontAwesomeを使ったアイコンメニューの作り方
今回、紹介するCSSとHTMLを記述すると上記のようなアイコンメニューが作れます。それでは、どのような手順かを説明します。
アイコンメニューを作る手順
- CSSを「追加CSS」に記述
- HTMLを任意の場所に記述
- 自分好みにカスタマイズ
アイコンメニューに必要なCSSとHTMLのコードを下記に置いて、ありますので、そちらをWordPressにそれぞれ場所に記述してください。
カスタマイズ方法も書いてありますので、順番に応じて参考にしてください。
記述するHTMLと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の入力が終わったら、アイコンメニューを表示したい部分に下記の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のカスタマイズ方法
fa-code<a href="###">
アイコンのページ先のURLは、###の部分に任意のページのURLを入力します。
fa-codei class="###"
アイコンメニューのアイコンを変更するには、「i class="###"」の部分の###を任意のAwesome Fontの文字コードを指定します。
fa-file-code-ostyle="color: ###;"
アイコンのカラーを変更する場合は、「style="color: ###;"」の部分の###を指定する必要があります。
指定するアイコン(Font Awesome)の探し方
ダイバーでは、「Font Awesome 4.7」が搭載されています。
Font Awesomeとは、無料で利用可能なWebフォントです。現在は、「Font Awesome 5」にバージョンアップしていますが、ダイバーでは、「Font Awesome 4.7」が使われているため、4.7バージョンのFont Awesomeの文字コードを指定する必要があります。
fa-arrow-circle-righthttps://fontawesome.com/v4.7.0/icons/
上記のサイトは、「Font Awesome 4.7」のアイコンフォントを探せるので、お気に入りのアイコンメニューのアイコンを探してみてください。
メニューアイコンを探したら、文字コードをコピーして、「i class="###"」の###部分に貼り付ければ、アイコンメニューに反映されます。
文字コードの指定のやり方
お気に入りのアイコンを見つけたら、クリックすると上記のようなページに移動します。
文字コードが表記されているので、その文字コードを指定して、アイコンメニューのHTMLに記述すれば、反映されます。
fa-camera-retro
<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>
<i class="fa fa-camera-retro">
青文字をコピペすれば、上記のアイコンのようにアイコンメニューに反映されます。
アイコンカラーの見つけ方
アイコンのカラーの見つけ方は、僕がよく配色の参考にしている「配色の見本帳」がオススメです。
fa-home配色の見本帳
マンガで使われている配色や、観光地のイメージ配色など、かなり感覚的に色を探せるのでオススメです。
アイコンメニューを実際に設置してみる
サイドバー
サイドバーにアイコンメニューは、鉄板です。ユーザー回遊率UPに、ぜひ設置してもらいたい場所です。
メインサイドバーにアイコンメニューの設置の仕方


サイドバーにアイコンメニューを設置するためには、「メインサイドバー」のウィジェットエリアにテキストに、あなたようにカスタマイズしたHTMLを記述すれば、アイコンメニューが表記されます。
カテゴリーページにアイコンメニュー
カテゴリーページにもアイコンメニューは相性がいいです。
子カテゴリーが増えたカテゴリーにとても効果的なので、参考にしてみてください。
スマホのドロワーメニューと検索ボックスにアイコンメニュー
スマートフォンのドロワーメニューや検索ボックスにもアイコンメニューが設置できるので、アイコンメニューはスマホでは、非常に見やすいので、ユーザー的にも嬉しいと思います。
まとめ
ダイバーのアイコンメニューは以上になります。
アイコンメニューは、ドロワーメニューやカテゴリーページにも導入できるので、ユーザー回遊率UPにお役立てください。
