ワードプレスのブログの回遊率を上げるボックスナビの作り方 特にJIN

もかるのアイコン画像もかる

カテゴリ別にアイコンを並べたナビがあるとユーザビリティが上がって、回遊率が上がるよ

回遊率を高めると言われているボックスナビの作成方法を紹介します。

こんなやつです(姉妹ブログの「雑記王」から引用です)。

boxnavi
目次
スポンサーリンク

ボックスナビ(メニュー)の作り方

簡単です。手順は次の2段階です。

1,CSSのコピペ
2.HTMLのコピペ

1.CSSのコピペ

次のコードを子テーマのstyle.cssあるいは「カスタマイズ」の「追加CSS」にペーストします。JIN仕様になっています。JIN以外の方は、

/* サイドバー */ #sidebar .p-nav ul li{

の部分の#sidebarを.sidebarに変更してください。

色を変える

fontawesomwのアイコンの色を変えたければ、color:fb9496 のfb9496の部分を他のカラーコードに変えます。

色見本はこちら(Wec色見本 原色大辞典)。

同じ色にする場合は2番目以降は不要です。

分割数を変える

上記のコードではPCのメインコンテンツでは4列、サイドバーでは2列、スマホでは2列になっています。3分割にしたい場合は、

calc(100%/2)をcalc(100%/3)に変更します。4列にする場合は、calc(100%/4)です。

↓この箇所です。

/* サイドバー */ #sidebar .p-nav ul li{ -ms-flex-preferred-size: calc(100%/2);/* 2列 */ flex-basis: calc(100%/2);/* 2列 */ }

2.HTMLのコピペ

サイドバーにカスタムHTMLかテキストを追加し、下記HTMLをペーストします。「画像またはFontAwesome」オリジナル画像または、FontAwesome、テーマJINのオリジナルアイコン等を入れます。

画像または「画像またはFontAwesome」の箇所は、オリジナル画像またはFontAwesome

<i class=”fas fa-cat”></i>

などのコードを入れます。

font awesome

テーマJINのオリジナルアイコンはこちら

jin-original-icon

スマホにボックスナビを設定する方法

smartphone-boxnavi

1.

スマホにもボックスナビを設定したい人は、「ボックスナビ(メニュー)の作り方」「1.CSSのコピペ」と同様、次のコードを加えます。

2.

次のHTMLを加えます。【bodyタグの終わり】にコピペします。

HTML-body-Tag

3.

パソコンと同じメニューを使う場合には、以上で設定は終了です。新たにメニューを設定する人は、「外観」→「メニュー」と進み、メニューを作り、パソコンのボックスナビ同様FontAwesomeのタグをコピペし、「メニューの位置」の「グローバルナビゲーション」に✔を入れ、「メニューを保存」します。

navi-labe
global-navi

以上、コードは、ぽんひろcomからの引用一部変更です。感謝申し上げます。

因みに、「ボックスナビ」の呼称もぽんひろさん考案だそうです。

目次
閉じる