Diverのヘッダーボタンの設定方法|中級者向けマニュアル
Diverのヘッダーボタンの設定方法|中級者向けマニュアル
Diverでは、ヘッダーに下記のようなリンクボタンを簡単に設置することができます。

Diverのヘッダーボタン

Diverのヘッダーボタン

今回は、このヘッダーボタンの設定方法について解説します。

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

ナビゲーションメニューの位置を「メニュー独立」に設定

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックします。

『外観→カスタマイズ』という順にクリックして進む

『外観→カスタマイズ』という順にクリックして進む

Diverのカスタマイズページが開きます。
画面左メニュー内の『メイン設定』をクリックしましょう。

画面左メニュー内の『メイン設定』をクリック

画面左メニュー内の『メイン設定』をクリック

一番上の「ナビゲーション設定」で『メニュー独立』のラジオボタンにチェックします。

『メニュー独立』のラジオボタンにチェック

『メニュー独立』のラジオボタンにチェック

ヘッダーロゴの位置を「左寄せ」に設定

再度カスタマイズページのトップに戻りましょう。
レイアウト設定』をクリックします。

画面左メニュー内の『レイアウト設定』をクリック

画面左メニュー内の『レイアウト設定』をクリック

一番上の「ヘッダーロゴ設定」で『左寄せ』のラジオボタンにチェックをしましょう。

『左寄せ』のラジオボタンにチェック

『左寄せ』のラジオボタンにチェック

ナビゲーションメニューとヘッダーロゴの位置設定が完了したら、
メニュー上部の『公開』ボタンをクリックします。

『公開』ボタンをクリック

『公開』ボタンをクリック

ヘッダーボタンを作成する

WordPressのダッシュボード左メニューから、『Diverオプションヘッダーボタン』という順にクリックします。

『Diverオプション→ヘッダーボタン』という順にクリック

『Diverオプション→ヘッダーボタン』という順にクリック

ヘッダーボタンの設定画面が開きます。

ヘッダーボタンの設定画面

ヘッダーボタンの設定画面

ここでは最大4個までボタンを作成できます。
下記の各項目を設定しましょう。

  • アイコン
  • タイトル
  • 背景色
  • 文字色
  • 表示設定
  • リンク先URL
  • リンク設定
  • オプション

アイコン

左端のアイコンをクリックすると、Diverで用意されているアイコンの中から、ボタンとして表示するアイコンを選択することができます。

ヘッダーボタンのアイコン一覧

ヘッダーボタンのアイコン一覧

タイトル

アイコンの下に表示されるテキストを設定します。

背景色

ボタンの背景色を設定します。

文字色

ボタンの文字色を設定します。

表示設定

非表示』のチェックボックスにチェックを入れると、ボタンが非表示になります。

リンク先URL

リンク先のURLを設定します。

リンク設定

下記2パターンのリンク設定をすることができます。

  • target="_blank"
    チェックを入れると、ボタンを押したときに新しいタブでリンクが開きます。
  • rel="nofollow"
    チェックを入れると、検索エンジンのクローラーがリンク先へ巡回しなくなります。

オプション

下記の各項目を設定できます。

ヘッダーボタンのオプション設定

ヘッダーボタンのオプション設定

  • アイコンサイズ
    アイコンサイズをピクセルで指定します。
  • 区切り線
    ボタンの区切り線の色を変更できます。
  • 区切り線太さ
    ボタンの区切り線の太さを変更できます。
  • 表示設定
    PC・スマホそれぞれで表示するかどうかを設定できます。

全ての項目を設定したら、『変更を保存』ボタンをクリックしましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

これで、ヘッダーボタンの設定は完了です。

PCでは下記、

Diverのヘッダーボタン

【PC】Diverのヘッダーボタン

スマホでは下記のように表示されます。

【スマホ】Diverのヘッダーボタン

【スマホ】Diverのヘッダーボタン

まとめ

今回は、Diverのヘッダーボタンの設定方法について解説しました。

ヘッダーボタンを使えば、視覚的にユーザーをおすすめのページに誘導することができます。

簡単に設置できるので、気になった方はぜひ設定してみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事