注目度の高い記事
Diverのヘッダーカスタマイズ方法まとめ【PC・スマホ両対応】

 

わかば
ブログののヘッダー部分をかわいくカスタムしたいんだけど
なかなか思ったとおりにできないなあ・・・

山本
Diver のヘッダーのカスタムに手こずっているみたいだね
じゃあ今回は、ヘッダー部分のカスタマイズ方法をまとめて解説するよ!

わかば
はい、助かります!

 

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

 

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

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

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

 

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

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

 

1.サイトロゴの設定方法

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

サイトロゴの設定方法

 

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

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

サイトロゴの設定方法

 

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

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

山本
縦長の画像を設定しても、レイアウトが崩れる事はありませんが
ロゴ画像が小さく表示されてしまいます

 

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

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

サイトロゴの設定方法

 

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

 

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

サイトロゴの設定方法

 

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

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

 

2.固定(追従)ヘッダーの設定方法

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

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

固定ヘッダーの設定方法

山本
固定ヘッダーとは、画面を下にスクロールした時に
”追従してくる” ヘッダーのことをいいます

 

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

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

固定(追従)ヘッダーの設定方法

 

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

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

固定(追従)ヘッダーの設定方法

 

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

固定(追従)ヘッダーの設定方法

 

わかば
固定ヘッダーって、背景を白にしかできないんですか?

山本
デフォルトだとヘッダーの背景色が反映されてないよね
でも大丈夫、次の方法でちゃんと色を設定できるよ

 

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

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

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

固定(追従)ヘッダーの設定方法

 

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

固定(追従)ヘッダーの設定方法

 

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

固定(追従)ヘッダーの設定方法

 

3.ナビゲーションメニューの設定方法

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

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

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

 

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

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

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

 

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

ロゴと並列

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

 

メニュー独立

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

わかば
ナビゲーションメニューに、なにを表示させるんですかね?

山本
ブログのカテゴリーをメニューとして表示させるのが一般的だね

 

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

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

わかば
おおっ!ちょっとオシャレですねー

山本
ブログは中身が大事!と言っても
たまにはこんな気分が上がる要素も欲しいよね(笑)

 

4.ヘッダーボタンの設定方法

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

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

 

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

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

 

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

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

 外観 > カスタマイズ > メイン設定 で「メニュー独立のチェックボックスをオン」にしておかないと、ヘッダーボタンは表示されません

 

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

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

 

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

 

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

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

 

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

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

 

5.ファーストビューの設定方法

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

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

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

 

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

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

 

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

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

 

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

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

 

6.ドロワーメニュー&検索ボックスの設定方法(スマホのみ)

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

ドロワーメニュー
ドロワーメニューを開いたとき
検索ボックス
検索ボックスを開いたとき

 

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

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

ドロワーメニュー&検索ボックス(スマホのみ)

 

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

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

 

さいごに

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

 

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

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

 

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

  • サイトロゴの設定方法
  • 固定(追従)ヘッダーの設定方法
  • ナビゲーションメニューの設定方法
  • ヘッダーボタンの設定方法
  • ファーストビューの設定方法
  • ドロワーメニュー&検索ボックスの設定方法(スマホ)

 

わかば
Diver って、ヘッダーだけでも色々カスタマイズできるんですねー

山本
そうだよね。ブログはユーザーの利便性が命!
しっかりと使いやすくカスタムしたいところだね

わかば
はい!これはじっくりと(かわいく)カスタムする必要がありそうです!

 

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事