ワードプレス・作り方

4.ロゴとメニューの設定

目安時間 8分

ロゴ、グローバルメニュー・フッターメニューの設定方法はこちらをご覧ください。

4-01. ロゴの設定
4-02. グローバルメニューの設定
4-03. フッターメニューの設定

4-01. ロゴの設定

ロゴの表示仕様

ロゴのタイプを「テキストを使用(サイトタイトルを表示)」or「画像を使用(アップロードしたロゴ画像を表示)」から選択可能です。

ロゴの表示サンプル(テキスト/画像)


ロゴの設定は、テーマオプション >「ロゴの設定」にて行います。

サイトタイトルをテキストで表示する

ロゴのタイプ「テキストを使う」を選択して下さい。サイトタイトルがテキスト表示されます。
ロゴのフォントサイズの設定箇所でフォントサイズを設定します。

ヘッダーロゴが表示される場所となるヘッダーの背景色は、テーマオプション>ヘッダー>ヘッダーバー設定>背景色にて変更できます。

ロゴ画像を設定する

ロゴのタイプ「画像を使う」を選択して下さい。ロゴ画像の設定方法はヘッダーロゴ/ヘッダーロゴ(スマホ用)共通となっております。ここでは「ヘッダーロゴ」を例に解説します。

①ロゴのタイプ「画像を使う」を選択、②設定したいロゴ画像をアップロードし、「設定を保存」して完了です。

「レティナディスプレイ用のロゴ画像を利用する」チェックボックスについて
レティナディスプレイなどの高解像度ディスプレイではロゴ画像がぼやけて見えることがあります。その対策として、大きいサイズのロゴ画像をCSSで縮小して表示する方法(レティナ対策)が有効です。
本テーマでは表示サイズの倍サイズのロゴ画像をアップロードしてこちらにチェックを入れることで自動的に1/2サイズに縮小して表示し、レティナ対策を施します。
デモサイトでは、横幅168px、縦幅54pxのロゴ画像を設定し「レティナディスプレイ用のロゴ画像を利用する」にチェックを入れています。

ヘッダーロゴは、自動的にヘッダーエリア左端に配置されます。「画像を使用する」が選択されていてもロゴ画像が設定されていない場合には、サイトタイトルがテキスト表示されます。

ロゴ画像を削除する

設定したロゴ画像を削除する場合、「画像を削除する」をクリック → 「設定を保存」してください。

ロゴの基本的な設定方法は以上となります。ヘッダーロゴ(スマホ用)も同様に設定してください。

ヘッダーのロゴ(スマホ用)

スマホ表示用にPC表示時とは別のロゴ画像を設定できます。

ヘッダーロゴ表示サンプル(スマホ)

フッターのロゴ

フッターにもPC、スマホそれぞれでヘッダーとは別のロゴ画像を設定できます。

フッターロゴ表示サンプル(PC)

フッターロゴ表示サンプル(スマホ)

以上でロゴ画像の設定が完了です。

4-02. グローバルメニューの設定

ヘッダーエリアに表示されるグローバルメニューの設定を行います。

グローバルメニューの表示サンプル

カスタムメニュー作成とグローバルメニュー設定

ダッシュボード左メニュー【外観】→【メニュー】を開きます。
カスタムメニューの設定方法については、下記より手順をご参照下さい。
参照:カスタムメニューを設定する

グローバルメニューに表示できるメニューの階層数の制限はございませんが、3階層位までを推奨いたします。

デモサイトのグローバルメニュー設定

テーマの位置 →「グローバルメニュー」にチェックを入れます。

本テーマ独自のグローバルメニュー表示仕様について

本テーマのグローバルメニューは、サブメニュー項目の表示方法に「①ドロップダウン形式(通常メニュー)」「②メガメニューA(カスタム投稿「クリニック」の記事一覧)」「③メガメニューB(クリニック案内)」「④メガメニューC(キャンペーン)」の4種類があります。

メニュー形式の設定はテーマオプション>ヘッダー>「メガメニューの設定」にて行います。
参照:グローバルメニュー表示設定

各メニューの違いについて解説します。

①ドロップダウンメニュー(※通常メニュー)

表示サンプル(デモサイトのグローバルメニュー「ブログ」)

メニュー項目が「通常の階層メニュー(親メニュー>子メニュー>孫メニュー…)」の場合、子メニュー、孫メニューが一般的なドロップダウン形式で表示されます。

②メガメニューA(カスタム投稿「クリニック」の記事一覧)

通常のドロップダウンメニューとは異なる表示スタイルでカスタム投稿「クリニック」の記事一覧を表示します。

表示サンプル

③メガメニューB(クリニック案内)

通常のドロップダウンメニューとは異なる表示スタイルでカスタム投稿タイプ「クリニック」の記事一覧と説明文を表示します。

表示サンプル(デモサイトのグローバルメニュー「クリニック案内」)

④メガメニューC(キャンペーン)

通常のドロップダウンメニューとは異なる表示スタイルでカスタム投稿タイプ「キャンペーン」の記事一覧をカテゴリー別に表示します。

表示サンプル(デモサイトのグローバルメニュー「キャンペーン」)

スマホ表示時のグローバルメニューの表示仕様

本テーマでは、スマホ表示時のグローバルメニューの表示仕様は下図のように、第一階層メニュー(親メニュー)のみを表示する仕様になっています。
デモサイトにスマホからアクセスすることで、実際の動作・表示をご確認頂けます。

グローバルメニュー表示サンプル(スマホ)

4-03. フッターメニューの設定

フッターエリアに表示されるフッターメニューの設定を行います。

フッターメニュー表示サンプル


ダッシュボード左メニュー > 外観 > 「メニュー」にて、グローバルメニューと同様にフッターメニュー用のカスタムメニューを作成します。
参照:4-02. グローバルメニューの設定

テーマの位置 →「フッターメニュー」にチェックを入れます。
デモサイトではグローバルメニュー・フッターメニューで共通のカスタムメニューを使用しています。

フッターメニューに表示できるメニューは、1階層のみとなります

スマホ表示時のフッターメニューの表示仕様

スマホ表示時のフッターメニューの表示仕様は下図のようになっています。
デモサイトにスマホからアクセスすることで、実際の動作・表示をご確認頂けます。

フッターメニュー表示サンプル(スマホ)

スマホ表示時のスマホ用固定コンテンツの設定方法については、下記より手順をご参照下さい。
参照:フッターコンテンツの設定

以上で、メニューの設定は完了です。

→ 「5.テーマオプションの設定」に進む

→ 「3.トップページの表示仕様と設定箇所」に戻る


この記事を書いた人

国領きとうクリニック