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

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

 

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

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

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

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

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

 

スポンサードリンク

【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の入力が終わったら、アイコンメニューを表示したい部分に下記の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>

 

<i class="fa  fa-camera-retro">

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

 

アイコンカラーの見つけ方

アイコンのカラーの見つけ方は、僕がよく配色の参考にしている「配色の見本帳」がオススメです。

 

配色の見本帳

マンガで使われている配色や、観光地のイメージ配色など、かなり感覚的に色を探せるのでオススメです。

 

アイコンメニューを実際に設置してみる

サイドバー

サイドバーにアイコンメニューは、鉄板です。ユーザー回遊率UPに、ぜひ設置してもらいたい場所です。

 

メインサイドバーにアイコンメニューの設置の仕方

サイドバーにアイコンメニューを設置するためには、「メインサイドバー」のウィジェットエリアにテキストに、あなたようにカスタマイズしたHTMLを記述すれば、アイコンメニューが表記されます。

 

カテゴリーページにアイコンメニュー

カテゴリーページにもアイコンメニューは相性がいいです。

子カテゴリーが増えたカテゴリーにとても効果的なので、参考にしてみてください。

 

スマホのドロワーメニューと検索ボックスにアイコンメニュー

スマートフォンのドロワーメニューや検索ボックスにもアイコンメニューが設置できるので、アイコンメニューはスマホでは、非常に見やすいので、ユーザー的にも嬉しいと思います。

 

まとめ

ダイバーのアイコンメニューは以上になります。

アイコンメニューは、ユーザー回遊率UPが見込めるので、ぜひ取り入れてみてください。

 

Pick Up 人気なWordPressテーマ「ダイバー」を使ってみた感想をまとめてみた
Pick Up Diver|23個の入力補助機能がブログ記事を作るときに便利すぎる

 

 

Diverの購入はこちら
スポンサードリンク
カスタマイズ性抜群のWordPressテーマ「Diver」

ブログコンテンツが増えてきたならば、当サイトも使用している。圧倒的カスタマイズ性に優れたのワードプレステーマ「Diver」がオススメです。

SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップが見込めます。ブロガーだって、アフィリエイターだって関係なしにオススメのテーマです。

長く愛されるコンテンツ作りを共に歩むなら、「Diver」これで決まりです!

現在、Diverはコロナウィルスの感染拡大に伴い、在宅勤務やテレワークを余儀無くされている方々を支援するため、期間限定で WordPressテーマ「Diver」の割引販売を開始されています。
販売価格 17,980円14,980円
期間 3月29日 0:00 〜 4月30日 24:00

Twitterでフォローしよう

おすすめの記事