【Diver】ヘッダーメニューの下にテキスト表示してデザインを変える方法

ひなまるです。

 

WordPressテーマ「Diver」を使った

ヘッダーメニューの下にテキスト表示する方法について解説します。

 

ちょっとした細かな設定かも知れませんが、

 

デザイン性にも優れたDiverは、

ヘッダーメニューの細部にもこだわって作られていることを紹介します。

 

ひなまる
ヘッダーメニューの各項目の下に
テキスト表示されるのはPCで見た時だけです。

設定はとても簡単で、

メニュー作成時に文字を入力するだけで

ヘッダーメニューのデザインを変えることができます。

 

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

 

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

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

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

 

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

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

 

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

スポンサーリンク

ヘッダーメニューの下にテキスト表示とは

はじめにDiverを使って、

ヘッダーメニューの下にテキストを表示させると

このような感じで仕上げることができます。

 

 

 

 

私たちのサイトには現在使用はしていませんが、

PCで表示する時のみテキストが表示されようになります。

 

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

「ロゴと並列」と「メニュー独立」の2パターンから選ぶことができますが、

テキスト表示はどちらを選んでも表示することが可能です。

 

ちなみに、このテキスト表示は、

ページ内を追跡してくれる固定ヘッダーにも対応しているので、

こんな感じで

 

 

表示されるようになるので印象が変わりますよね。

 

固定ヘッダーの表示設定をオンにするだけで、

連動してこのように表示されるのでとても便利と言えます。

テキスト表示させる設定方法

それでは、

設定方法について解説していきますね。

 

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

①「外観」②「メニュー」をクリックします。

 

 

「メニュー構造」の中にある

ヘッダーメニューに設置している各項目がありますが、

これを一つずつ開いていき設定をして行きます。

 

その一つを開いてみると、

 

 

このような設定画面が表示されるので、

「説明」の欄の箇所へテキストを入力していきます。

 

もしも「説明」の欄の表示がされなかった場合は、

こちらの設定をすると表示がされるようになります。

 

「説明」の表示方法
「外観」→「メニュー」で開いた画面の上の方にある
「表示オプション」をクリックします。
そうすると、表示オプションの設定画面が開くので、
「説明」のチェックボックスへ印を付けます。
表示オプションを閉じて、
「説明」の欄が表示されていれば大丈夫です。

 

各項目のテキスト入力が終わったら、

 

 

「メニューを保存」を忘れずにクリックしましょう。

 

実際にサイト内のヘッダーメニューの下に

テキストが表示されていた設定は終わりです。

ヘッダーメニューとテキストのカラーは同じ

最後にカラー変更のカスタマイズ設定についても触れておきます。

 

Diverではヘッダーメニューとテキストのカラーは同色の設定です。

2つ合わせて1色となるので、

変更をしたい場合は以下の手順で進めてみましょう。

 

WordPressのメニューから、

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

 

 

カスタマイズが開くので「基本カラー」を選択します。

 

 

基本カラー内には項目がいくつも並びますが、

ここで使う設定項目は以下の3つです。

 

ヘッダーリンク 「ロゴと並列」で設定している場合
独立メニューリンク 「メニュー独立」で設定している場合
固定ヘッダーリンク 「固定ヘッダー」を変更する場合

 

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

・サイトロゴとヘッダーメニューを並列させて表示する「ロゴと並列」

・サイトロゴとヘッダーメニューは独立させて表示する「メニュー独立」

という設定方法があります。

 

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

ぜひ読んでみてくださいね。

 

「固定ヘッダー」のカラー変更をする場合は

特に気にする必要はありませんが、

 

「ロゴと並列」の場合は「ヘッダーリンク」から、

「メニュー独立」の場合は「独立メニューテキスト」からと変更箇所が異なります。

 

実際に触りながら設定してみると

実感しながらカラー変更することができると思いますよ。

 

カラー設定の変更が終わったら、

 

 

基本カラーの「公開」をクリックして完了です。

設定は以上で終わりとなります。

まとめ

ここまでがWordPressテーマ「Diver」を使った

ヘッダーメニューの下にテキスト表示させる設定方法です。

 

ちょっとしたことですが、

ヘッダーメニューの印象も変われば、

読者に与えるサイト内のイメージも変えることができます。

 

また、Diverではヘッダーメニューの設定方法が豊富に用意されていますが、

それ以外にも優れたデザイン性やアフィリエイトに特化した機能がいくつもあります。

 

他の記事でも紹介しているのでぜひ参考にしてみて下さいね。

 

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

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

 

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

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

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

Twitterでフォローしよう

おすすめの記事