Diverのヘッダーカスタマイズ方法まとめ【PC/スマホ両対応】

 

 

ワードプレステーマ Diver の、ヘッダー部分のカスタマイズ方法の解説です。

 

「まだヘッダー部分はなにもさわってないよー」っていう方でも

この記事の順序通りに設定していくことで

ヘッダーの設定をすべて完了できるように、順番に解説していきます。

 

ヘッダーカスタマイズの知りたいことが決まっている場合は

以下のもくじから、直接目的の項目をご覧になってください。

 

１．サイトロゴの設定方法

サイトタイトルの代わりに表示させる、サイトロゴの設定方法です。

 

1-1 サイトロゴの画像設定

サイトロゴは、管理画面 ＞ 外観 ＞カスタマイズ ＞ サイトロゴ・アイコン から設定することができます。

 

ロゴ画像は、250×60px サイズ の横長のものを使います。

ヘッダーの背景を透過させたい時は、png 画像を使うようにしましょう。（ jpg だと背景が透過されません）

 

1-2 サイトロゴの表示位置設定

外観 ＞ カスタマイズ ＞ レイアウト設定 から、ロゴの表示位置を変更することもできます。

 

サイトロゴ左寄せサンプル

 

サイトロゴ中央寄せサンプル

 

以下のページで、ロゴをつくれるサイトを紹介しています。参考にどうぞ。

参考リンク簡単にロゴが作成できるサイト８選【日本語/英語の両方に対応】

 

２．固定（追従）ヘッダーの設定方法

2-1 固定ヘッダーを表示させる方法

外観 ＞ カスタマイズ ＞ メイン設定 から、固定（追従）ヘッダーの設定ができます。

 

固定ヘッダーを表示する のチェックボックスをオンにすると

画面上部に追従ヘッダーが表示されるようになります。

 

ミニヘッダーを表示する のチェックボックスをオンにすると

通常のヘッダーの上に、ミニヘッダーが表示されるようになります。

 

ミニヘッダーには、外観 ＞ カスタマイズ ＞ サイト基本情報 で設定した、キャッチフレーズが表示されます。

 

 

2-1 固定ヘッダーの色を設定する方法

固定ヘッダーの設定欄に項目がないので戸惑うかもしれませんが、ちゃんと色を変更することもできます。

外観 ＞ カスタマイズ ＞ 基本カラー の画面で少し下にスクロールすると、固定ヘッダーの色の設定欄があります。

 

固定ヘッダー背景の色を選択をクリックすると、ヘッダーの透過度の設定もできます。

 

たとえば、色の透過度を1番左にまでスライドして「０」にすると、このようにテキストだけの表示になります。

 

３．ナビゲーションメニューの設定方法

続いては、ナビゲーションメニューの設定方法です。

ナビゲーションメニューとは、ヘッダーに表示されるこのようなメニューのことです。

 

3-1 ナビゲーションメニューの表示設定

ナビゲーションメニューの表示位置設定は、外観 ＞ メイン設定 ＞ ナビゲーション設定 から行います。

 

それぞれの表示サンプルを見てみましょう。

ロゴと並列

 

メニュー独立

 

ナビゲーションドロップダウンエフェクトから、メニューの表示方法のアニメーションの設定もできます。

 

ドロップダウンエフェクトとは、メニューにマウスを持っていった時に、副項目が表示されるアニメーションのことです。

 

※画面クリックで動画が再生されます(スライド設定のサンプル)

 

3-2 ナビゲーションメニューの作成方法

ナビゲーションメニューに表示させるメニューは、管理画面 ＞ 外観 ＞ メニュー から作成できます。

 

メニュー項目を追加 で、表示させるメニューを選んで、メニュー構造 にドラッグ＆ドロップで追加できます。

 

Diver のメニューの作り方については、以下のページで解説しています。

参考リンクDiver のメニュー設定方法。どこに何を表示できるかもあわせて解説します

 

3-3 ナビゲーションメニューをカッコよくカスタムする方法

具体的に言うと、ナビゲーションメニューの下にテキストを表示させる方法です。

 

メニュー画面の右上にある、表示オプション をクリックします。

 

オプション画面が出てくるので、説明 のチェックボックスをオン にします。

 

メニューに追加した項目を開くと「説明」欄が増えているので、そこに表示させたいテキストを入力します。

 

メニューを保存 をクリックすると、このようにメニューの下に説明文が表示されるようになります。

 

４．ヘッダーボタンの設定方法

ヘッダーロゴの右横の目立つスペースに、ヘッダーボタンを設置できます。

 

ヘッダーボタンの設定画面は、管理画面 ＞ Diverオプション ＞ ヘッダーボタン から開きます。

 

ここで、最大４つまでヘッダーボタンを作成することができます。

 

ここで、ホーム（トップページ）へのヘッダーボタンを作ってみました。

動画にしたので、その様子をご覧ください。

 

※画面クリックで再生が始まります。

 

これで、わ－研。のヘッダーに「ホーム」のボタンが追加されました。

 

ヘッダーボタン設定画面下部のオプションで、アイコンのサイズや、PC・スマホでの表示非表示なども設定できます。

 

５．ファーストビューの設定方法

ファーストビューとは、PC やスマホでブログを開いた時に、１番最初に目に入るエリアのことを言います。

わ－研。の場合だと、以下の、画像とテキストを設置してある部分がそうです。

 

ファーストビューは、１番目に付きやすいエリアなので

あなたのブログを、読者にアピールするのに最適な機能です。

 

管理画面 ＞ Diverオプション ＞ ファーストビュー から、設定をすることができます。

 

ファーストビューの詳しい設定方法については、以下のページで解説しているので参考にしてください。

参考リンクDiver のファーストビューの設定方法

 

６．ドロワーメニュー＆検索ボックスの設定方法（スマホのみ）

スマホのヘッダーに表示される、ドロワーメニュー（左上）と、検索ボックス（右上）の設定方法です。

 

ドロワーメニューと検索ボックスは、それぞれウィジェット画面から設定できます。

表示させたいウィジェットを、ここに設定するだけでOK。

 

Diver のウィジェット機能の使い方は、以下のページで解説しています。

参考リンクDiver のウィジェット機能の使い方を図解つきで徹底解説

 

さいごに

今回は、Diver のヘッダーのカスタマイズ方法について解説しました。

 

ヘッダーは、1番読者の目につく「ブログの顔」とも言える部分なので

見た目だけでなく、使いやすくカスタムしてリピーターを増やしましょう！

 

さいごにこのページのおさらいです。

 

 

注目の記事「Diver」の外観カスタマイズ方法の全て