wordpressテーマ【JIN】でメニューを最適化する

wordpressのテーマで大人気の「JIN」。

私も「JIN」のおかげでブログを楽しく簡単に書けるようになりました。

ほとんど設定をカスタマイズすることなく使っているのですが、メニューの設定でちょっとだけ悩みました。

そこで、それぞれの場所に適したメニューの設定をまとめてみました。

尚、それぞれのメニューの設定方法は、JINの公式マニュアル「グローバルメニューの設定方法」、「スマホスライドメニューの設定方法」「スマホフッターメニューの設定方法」をご参照くださいね。

JINのメニュー位置

「JIN」のメニューには、メニュー位置として以下の４箇所が用意されています。

パソコンとスマホで、表示されるメニューと表示されないメニューがあるのでまとめてみます。

※ピックアップコンテンツはちょっと特殊なので、今回はメニューの配置からは除外して考えます。

パソコンの場合、メニューはグローバルナビゲーションのみ表示なのであまり深く考える必要はありませんが、スマホの場合、すべてのメニューが表示されることになります。

グローバルナビゲーションメニューはクリックすると開くメニュー（右上のアイコン）なので気にする必要はないと思いますが、スマホスライドメニューとスマホフッター固定メニューが同一画面に表示されます。

気を付けるべき点は、スマートフォンの場合画面サイズがそれほど大きくないので、上下のメニューが「重複しないように設定した方が良い」という点です。

同じメニューが上下にあるのは少ししつこい感じがしますし・・・。

おすすめのメニュー設定

メニューに表示する項目は以下のようなものが一般的です。

他にも、スマホフッター固定メニューにはSNSフォローリンクもおすすめです。

これらを上下メニューのどこに表示したいかきちんと整理する必要があります。

両メニューとものスクロールなしで表示するメニュー数は４つですので、スマホスライドメニュー４＋スマホフッター固定メニュー４のそれぞれにどう当てはめるか考えてみます。

もちろん、それぞれのブログで表示したいメニューは異なると思いますので、この表を参考に、自身のブログに最適なメニュー表示を整理してみると良いと思います。

あわせて読みたい

プラグインなしで作るサイトマップの作り方 ブログを始めたあなた・・・。何記事書きましたか？ 自身で記事の全体構成をきちんと把握できていますか？ ちょっとでも怪しいあなた！ あなたが迷うぐらいなら、読者の...

よく使うFont-Awesome

あわせて読みたい

WPテーマ【JIN】はFontAwesomeの代わりにオリジナルアイコンが使える テーマ貧乏のまつみです（笑） WPデビューはテーマ【JIN】。もっと細かい設定ができる違うテーマを使ってみたくなって【Affinger5(WING)】を使い、やっぱり【JIN】の気...

各メニューのアイコンにはFont-Awesomeを使います。

毎回探しに行くのが面倒になったので、メニューによく使う無料のFont-Awesomeをまとめました。

※プロフィールや各カテゴリーのアイコンは人それぞれですので、Font-Awesomeのページから探してくださいね。

JINでfont-awesomeを使う時の注意点

JINではfont-awesomeのバージョン4.7に対応しています。

最新のfont-awesomeのバージョンは５になっています。

バージョン5のコードを利用すると表示できないので注意が必要です。

対応していないフォントを使うと・・・

上記のように、アイコンが【！】マークの点滅状態となります。

font-awesomeのバージョン確認方法

選んだ画像の右上にバージョンが表示されています。

こちらは「5.0.9」となっているので利用できません。

旧バージョンの利用方法

font-awesome 4.7から旧バージョンを表示して、利用したいフォントを選びましょう。

メニューに見えるけどメニューじゃない設定

ちなみに、メニューに見えるけどメニューじゃない場所があります。

上記の部分はメニューではなく、トップページの記事一覧に表示するカテゴリーIDの設定です。

外観→カスタマイズ→トップページから、以下の部分の設定です。

【最新記事】は固定なので、その他に３つのカテゴリーIDを指定できます。