ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

テーマLightning G3のナビゲーションメニュー比較【無料版vs有料版】

ワードプレスの人気テーマLightningのナビゲーションについて無料版と有料版を比較してみます。

ざっと表にまとめると以下の通りです。

無料版有料版
ヘッダーナビナビゲーション
回り込み
(以下より選択可)
・ナビゲーション回り込み
・ナビゲーション回り込み&縦書き
・中央揃え
・中央揃え&ナビ縦書き
・タイトル中央&ナビ貫通
・ヘッダーコンタクトあり&ナビ貫通
・ヘッダーウィジェットあり&ナビ貫通
スクロール時の
ヘッダーナビ固定
固定 ナビ中央揃え(以下より選択可)
・固定しない
・固定 中央揃え
・固定 ナビコンテナ幅
・固定 ロゴ&ナビ回り込み
・固定 ロゴ&ナビ回り込み全幅
フッターナビ左・中央・右 から選択可
モバイルナビメニューボタン:
・・・左
スライド方向:
・・・ドロップダウン
メニューボタン:左 or 右
スライド方向(以下より選択)
・ドロップダウン
・左⇒右
・右⇒左
ヘッダー上部ナビなし表示可
モバイル固定ナビなし表示可
(メニュー開閉と4つのボタン設定)

記事本文内では具体的に画像でナビゲーションの見映えを紹介しています。ぜひご覧ください。

本記事検証時(2022年1月16日)の各バージョン

  • ワードプレス:5.8.3
  • テーマLightning:14.13.6
  • プラグインLightning Pro Unit:0.14.0

ワードプレスのナビゲーションメニューの基本的な使い方は以下の記事を参照ください。

ナビゲーション以外にLightning無料版と有料版の違いを知りたい場合は次の記事がおすすめです。

無料版のナビゲーション

可能な位置設定は3種類

外観>メニューのページでわかるように3カ所の位置設定が可能です。

ナビゲーションの場所の設定方法

Header Navigation:ヘッダー部に表示されるヘッダーナビゲーション
Footer Navigation:フッター部に表示されるフッターナビゲーション
Mobile Navigation:モバイル機器にて表示されるハンバーガーメニュー

Mobile Navigation位置を特に指定しない場合は、ヘッダーナビと同じメニュー内容がMobile Navigationに反映されます。

ヘッダーナビゲーション

ヘッダーナビゲーションは、サイトロゴの右側に回り込んで表示されます。

グローバルナビゲーション

ページを下へスクロールを始めるとナビゲーションが画面上に固定化されます。このときサイトロゴは消えてナビゲーションが中央揃えで表示されます。

スクロールで固定化

フッターナビゲーション

フッター上部の左詰めでナビゲーションが表示されます。

フッターナビゲーション

モバイルナビゲーション

左上のハンバーガーメニューをクリックするとメニューがドロップダウンして開く仕様です。

モバイルナビゲーション
ドロップダウンしてメニューが開く

有料版のナビゲーション

可能な位置設定は4種類+モバイル固定ナビ

外観>メニューの画面を見ると、無料版にはなかったHeader Top Navigationというメニュー位置が設定できるのがわかります。

有料版のメニュー設定画面

Header Top Navigation:ヘッダー上部の帯状エリアに表示されるナビゲーションメニュー

上の画像の場合、フッターナビと同じメニューがヘッダー上部ナビゲーションに選ばれています。

ヘッダー上部ナビゲーション

外観>カスタマイズ>Lightningヘッダー上部設定で、下記の2カ所にチェックが入っていない場合にヘッダー上部ナビゲーションが表示されます

Lightningヘッダー上部設定画面

こんな感じでナビゲーションが表示されます。

ヘッダー上部ナビゲーションの表示

ちなみに左側にある ”このサイトはデモサイトです” はこのサイトのキャッチフレーズです。

このヘッダー上部の帯状エリアには、電話番号やお問い合わせ先ボタンを表示することも可能です。

ヘッダー上部帯状エリアのお問い合わせ情報

ただし表示としては小さいので、しっかりアピールするならば次のヘッダーナビゲーションのバリエーションの方が個人的には好みです。

ヘッダーナビゲーション

外観>カスタマイズ>Lightningヘッダー設定でヘッダーナビゲーションのレイアウトやスクロール時の固定ナビレイアウトを設定することができます。

ヘッダー部設定画面

ナビゲーションのレイアウト

次の設定が可能です。

  • ナビゲーション回り込み
  • ナビゲーション回り込み&縦書き
  • 中央揃え
  • 中央揃え&ナビ貫通
  • ヘッダーコンタクトあり&ナビ貫通
  • ヘッダーウィジェットあり&ナビ貫通

ナビゲーション回り込み

無料版と有料版デフォルトの設定です。

グローバルナビゲーション

ナビゲーション回り込み&縦書き

ナビゲーション回り込み&縦書き表示

中央揃え

サイトロゴも中央に表示されます。

ヘッダーナビ中央揃え表示

中央揃え&ナビ縦書き

中央揃えと縦書き表示

タイトル中央&ナビ貫通

ナビがコンテンツ幅いっぱいに広がって配置されます。

中央揃え&ナビ貫通表示

ヘッダーコンタクトあり&ナビ貫通

住所や電話番号およびお問い合わせリンクボタンといったお問い合わせ情報がヘッダー内に表示されます。お問い合わせ情報はExUnitのお問い合わせ設定で入力します。

コンタクトあり&ナビ貫通表示

ヘッダーウィジェットあり&ナビ貫通

ウィジェットの”ヘッダー右側エリア”に設置したコンテンツが表示されます。
(下記例では画像を配置しています)

ヘッダーウィジェット&ナビ貫通表示

スクロール時のナビ固定

次の設定が可能です。

  • 固定しない
  • 固定 ナビ中央揃え
  • 固定 ナビコンテナ幅
  • 固定 ロゴ&ナビ回り込み
  • 固定 ロゴ&ナビ回り込み全幅

”固定しない” 以外の4通りは以下の通りです。

固定 ナビ中央揃え

無料版と有料版デフォルトの設定です。

スクロールで固定化

固定 ナビコンテナ幅

スクロール固定ナビコンテナ幅

固定 ロゴ&ナビ回り込み

スクロール固定ロゴ&ナビ回り込み

固定 ロゴ&ナビ回り込み全幅

スクロール固定ロゴ&ナビ回り込み全幅

フッターナビゲーション

外観>カスタマイズ>Lightningフッター設定 でフッター上部のナビゲーションの位置を左・中央・右の3つから選択することができます。

Lightningフッター設定画面

左表示

無料版と有料版デフォルト設定はこの左表示です。

フッターナビゲーション

中央表示

フッターナビ中央表示

右表示

フッターナビ右表示

モバイルナビゲーション

無料版ではハンバーガーメニュー位置は左、メニューの開き方はドロップダウンですが、有料版ではハンバーガーメニュー位置とメニューの開き方を変更可能です。

モバイルナビゲーション

外観>カスタマイズ>Lightningモバイルナビ で設定します。

モバイルナビの設定

モバイル固定ナビゲーション

有料版ではモバイル固定ナビゲーションとして、画面下部に次のようなナビゲーションを表示することができます。

モバイル固定ナビ

デフォルト設定では、このモバイル固定ナビゲーションは非表示設定となっていますが、外観>カスタマイズ>Lightningモバイル固定ナビ において表示設定します。

また、メニュー開閉ボタンの表示や各リンクボタン(最大4つまで)の設定が可能です。

モバイル固定ナビゲーションの設定画面

上記以外にボタンの文字色・背景色・Current Colorの設定も可能です。

また、モバイル固定ナビを表示している場合、モバイル固定ナビウィジェットエリアが使用できるようになります。

まとめ

まとめとしてもう一度、無料版と有料版の比較の表を紹介しておきます。

無料版有料版
ヘッダーナビナビゲーション
回り込み
(以下より選択可)
・ナビゲーション回り込み
・ナビゲーション回り込み&縦書き
・中央揃え
・中央揃え&ナビ縦書き
・タイトル中央&ナビ貫通
・ヘッダーコンタクトあり&ナビ貫通
・ヘッダーウィジェットあり&ナビ貫通
スクロール時の
ヘッダーナビ固定
固定 ナビ中央揃え(以下より選択可)
・固定しない
・固定 中央揃え
・固定 ナビコンテナ幅
・固定 ロゴ&ナビ回り込み
・固定 ロゴ&ナビ回り込み全幅
フッターナビ左・中央・右 から選択可
モバイルナビメニューボタン:
・・・左
スライド方向:
・・・ドロップダウン
メニューボタン:左 or 右
スライド方向(以下より選択)
・ドロップダウン
・左⇒右
・右⇒左
ヘッダー上部ナビなし表示可
モバイル固定ナビなし表示可
(メニュー開閉と4つのボタン設定)

有料版ではかなりメニュー機能が豊富なのがわかりますね。

ナビゲーションメニュー1つでサイトの回遊率が大きく向上させることができます。有料版をぜひ検討してみてはいかがでしょうか?

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる