Diverのヘッダーメニューとページを追跡する固定ヘッダーの設定方法

ひなまるです。

 

今回はWordPressテーマ「Diver」を使った

ヘッダーメニューと固定ヘッダーの設定方法について解説します。

 

Diverではトップページに設置できるヘッダーメニューや、

サイト内を追跡してくれる固定ヘッダーが驚くほど簡単に設定できます。

 

ひなまる
ヘッダーメニューからサイトの構成が把握できると、
読者にとっても分かりやすく次の記事も読んでもらいやすくなりますよ!

また、回遊率の高いサイトほど

SEO的にも良いサイトだと評価されやすくなります。

 

初心者が使っても優しいWordPressテーマ「Diver」

こちらの記事で詳しく紹介しています。

当サイトで購入された方だけに特典付きでご案内しています。
※Diverならこんな動くマーカーも簡単に設定できてしまうのです!

 

また、Diverを使っていない人でも、

この記事から初心者でも優しく使えるDiverの機能の良さが分かると思います。

 

ぜひ参考にしてみてくださいね。

それではよろしくお願います。

スポンサーリンク

ヘッダーメニューについて

他のサイトを見てみても

共通してヘッダーメニューが表示されているのに気付くと思います。

 

ヘッダーメニューの役割は、

読者が知りたい情報に辿り着くための案内板のようなもので、

知りたい情報が見付けやすいようにすることができます。

 

サイト内を読者が回遊してくれて

成約に結び付くページまで読者が来てくれるには、

やはりヘッダーメニューを含めたサイト設計が重要となるでしょう。

 

そんなヘッダーメニューもDiverを使えば、

とても簡単に設定ができて変更することができるので

是非やってみることをおすすめします。

 

早速ですが、その設定方法について見ていきましょう。

Diverのヘッダーメニューの表示方法

それではヘッダメニューの表示方法について解説していきます。

 

まずはWordPressのメニューから、

①「外観」②「カスタマイズ」をクリックします。

 

 

カスタマイズが開くので「メイン設定」をクリック。

 

 

ヘッダーメニューの表示の方法には、

以下の2点の設定項目を使っていきます。

 

・ナビゲーション設定
・固定ヘッダー設定

ナビゲーション設定のやり方

ナビゲーション設定でできることは以下の3点です。

 

・ロゴと並列
・メニュー独立
・ナビゲーションドロップダウンエフェクト

 

「ロゴと並列」と「メニュー独立」

Diverのヘッダーメニューの設定には、

「ロゴの並列」か「メニュー独立」どちらかを選択する必要があります。

 

ヘッダー部分だけを見てみると、

「ロゴと並列」の場合はこんな感じで表示されます。

 

 

ヘッダー内にヘッダーメニューが一体化されて表示されます。

それに対して「メニュー独立」の場合はこんな感じです。

 

 

ヘッダーとヘッダーメニューが独立した状態になります。

 

メニューを独立させることによって、

こんな感じに画像(ファーストビュー)を入れることだってできてしまいます。

 

 

トップベージの印象も変わりますよね。

ナビゲーションドロップダウンエフェクト

ナビゲーションドロップダウンエフェクトとは、

ヘッダーメニューの階層下に着いているメニューの表示の仕方を変更する機能です。

 

こんな感じの階層が付いたメニューのこと。

よく見かけるメニューを選ぶと下に新たなメニューが開くやつです^^

 

 

この表示の仕方を変更するために、

「ナビゲーションドロップダウンエフェクト」の中から

表示する形状を選ぶことができます。

 

 

触りながら気に行ったものを選んでみてくださいね。

固定ヘッダーの設定のやり方

固定ヘッダーの設定でできることは以下の3点です。

 

・固定ヘッダーで表示するメニュー
・固定ヘッダーを表示する
・ミニヘッダーを表示する

固定ヘッダーとは、

私たちのサイトでも表示されているように、

スクロールすると画面の上に出てくるヘッダーのことです。

 

 

実際に見ていただくと分かりますが、

サイトタイトルと並行してヘッダーメニューが表示されています。

 

ちなみに、これはPC表示されたものなので、

スマートフォンの場合はこのように表示されますよ。

 

 

PCとスマートフォンでは表示のされ方は異なりますが、

ここではPCに表示される固定ヘッダーを中心に解説していきますね。

固定ヘッダーで表示するメニュー

固定ヘッダー内にヘッダーメニューウィジェットか、

どちらかを選択する必要があります。

 

 

「ヘッダーメニュー」を表示に選ぶ場合は、

このサイト同様、固定ヘッダー内にヘッダーメニューが表示されます。

 

しかし、「ウィジェット」の表示を選んだ場合は、

WordPressのウィジェットの追加設定から始めることになります。

 

ひなまる
先ほどのナビゲーション設定の「メニュー独立」を選ぶことで、
固定ヘッダー内だけでなく、トップページのヘッダーにも表示できるようになります。

 

ウィジェットの追加設定を簡単にみておきましょう。

 

まずは、WordPressのメニューから、

①「外観」②「ウィジェット」をクリックします。

 

 

「ヘッダーロゴの右」にウィジェットを追加することで、

固定ヘッダー内に各ウィジェットを表示させることができます。

 

例えば、

「ヘッダーロゴの右」の中に「検索」のウィジェットを追加すると、

このような感じで検索枠が表示されるようになりました。

 

 

私たちとしては、

ヘッダーメニューの方が使いやすいのでウィジェットは使っていません。

 

どちらが良いかは使い方にもよるので、

あなたのサイトに合わせて設定してみましょう。

「固定ヘッダーを表示する」と「ミニヘッダーを表示する」

「固定ヘッダーを表示する」の設定については、

チェックボックスに印を付ければ固定ヘッダーが表示され、

外せば固定ヘッダーが表示されなくなります。

 

 

クリックひとつで切り替えができるのでとても便利な機能です。

 

また、

「ミニヘッダーを表示する」の設定では、

ヘッダーの上にサイトの説明やキャッチフレーズなど、

入れられるスペースができてメニューも表示させることができます。

 

 

こちらもチェックボックスに印を付けるだけで、

簡単にサイト内に表示できるようになります。

まとめ

以上がWordPressテーマ「Diver 」を使った、

ヘッダーメニューの設定方法となります。

 

メニューの表示の仕方によって、

読者がサイト内を回遊してくれる効果を期待することができます。

 

特に固定ヘッダーは、

Diverでは簡単に設定することができるので使いやすく便利な機能です。

 

ぜひあなたのサイトに合わせた

ヘッダーメニューろ固定ヘッダーの設定してみてくださいね。

 

今回はここまでとなります。

この記事があなたのお役に立てれば幸いです。

 

他のDiverの関連記事はこちら

スポンサーリンク
初心者にも優しい高品質高機能なWordPressテーマ「Diver 」

Diverは簡単に使うことができる高品質高機能なハイスペックなWordPressテーマです。さらに、その使いやすさから初心者にも優しく実績に基づき作られた内部構造や無駄の無い美しいデザインは誰にでも手にすることができます。また「常にバージョンアップが行われ完璧なSEO対策」「直接メールサポートが無期限・無制限で利用可能」「豊富な入力補助機能を使ってのデザインは無限大」「複数ブログでの利用制限なし」などなど特徴を上げれば切りがありません。Diverだからこそ詰め込むことができたワンランク上のWordPressテーマを実感してみて下さい。(画像の出典元:Diver)

Twitterでフォローしよう

おすすめの記事