デザイン設定は、サイトの細部を指定する機能群です。フォントスタイルハンバーガーメニューの表示指定、ドロワーメニュー内のリストデザイン、ページ本文のコンテンツ幅や文字サイズ、hタグ(h2・h3・h4)の装飾指定、目次の装飾指定、サイドバーの装飾指定、フッターのデザイン設定が可能です。

デザインの設定

WordPress管理画面にログイン後、メニュー名「外観」>「カスタマイズ」>「デザイン設定」をクリックします。

デザイン設定のメニュー画面

背景画像

背景画像は、WordPress本体の機能です。画像を指定することで背景色の指定がない箇所に背景画像を表示できます。画像の表示パターンの指定や画像の位置を調整することも可能です。

背景画像の設定

プリセットの選択肢は次の通りです。

  • デフォルト:画像を返し表示
  • フルスクリーン:背景面積の全面に表示するよう画像を拡大表示
  • 画面に合わせる:画面サイズに合わせて表示
  • 繰り返し:画像を繰り返し表示
  • カスタム:背景画像をスクロール固定で表示

全般設定

全般設定では、ボタンのデザインを一括で指定できます。対象ボタンは、Emanon Premiumの各機能から設定するボタンのみです。ブロックエディタで設定するボタンは対象外となります。

一括設定の対象となるボタンは下記の通りです。

  • ファーストビューのボタン
  • CTA[ページ]のボタン
  • SNSフォローボタン
  • Emanon Premium専用のウィジェットのボタン
  • その他、Emanon Premium機能からの出力ボタンやプラグインのボタン(一部要素を除く)

ボタン ホバーアニメーションの表示例

フォントスタイル設定

フォントスタイル設定は、文字のスタイルや太さを一括指定する機能です。一括指定の対象箇所は、「サイトタイトル」、「キャッチフレーズ」、「ファーストビュー タイトル」、「ファーストビュー サブタイトル」、「ファーストビュー メッセージ」、「h1 | ページタイトル」、「h2」、「h3」、「h4」、「h5」、「h6」、「サイト全体」、「ヘッダーメニュー」、「フッターメニュー」です。

フォントの種類

フォントは、ゴシック・サンセリフ、明朝・セリフ、Noto Sans JP、Noto Serif JPの4種類から選択できます。

フォントの種類

Noto Sans JP、Noto Serif JPは、Google fontsが提供するWebフォントを読み込む設定です。Google fontsを利用するメリットして、端末に依存せず指定のフォントを表示できる点が挙げられます。

ハンバーガーメニュー設定

ハンバーガーメニューとは、縦並び線「≡」のアイコンです。ハンバーガーメニューをクリックすると、ドロワーメニューが左からスライドインします。

ハンバーガーメニューは、パソコンとスマホの両方で表示可能です。ハンバーガーメニュー[PC]を有効にすると、パソコンヘッダーエリア右端に「≡」ボタンが表示されます。

ハンバーガーメニュー[PC]の表示例

ハンバーガーメニュー[SP]を有効にすると、スマホヘッダーエリア右端に「≡」ボタンが表示されます。

ハンバーガーメニュー[SP]の表示例

ハンバーガーメニュー[追従型]を有効にすると、スマホの画面右下にハンバーガーメニューの「≡」ボタンが表示されます。

ハンバーガーメニュー[追従型]の表示例

外観>メニュー>メニューの位置

ハンバーガーメニューを表示する場合、ドロワーメニューの指定必須です。外観>メニューの「メニューの位置」でドロワーメニュー[PC](パソコンで表示) またはドロワーメニュー[SP](スマホで表示)を有効にしてください。

外観>メニュー>メニューの位置
外観>メニュー

詳細は、ドロワーメニュー[PC] ・ドロワーメニュー[SP]の設定を参照してください。

ドロワーメニュー設定

メニュー名「外観」>「カスタマイズ」>「デザイン設定」>ドロワーメニュー設定をクリックし、ドロワーメニューのデザインを設定します。

タイトルは、メニューの上部に表示される文言を入力します。例 メニュー 空白でも問題はありません。

メニュー親リスト要素子リスト要素は、ドロワーメニュー内に表示されるメニューリストに適用されます。見出しデザイン見出し配置は、ドロワーメニュー内に設置したウィジェットのタイトルに適用されます。

ドロワーメニューの表示例

ドロワーメニューは、ウィジェットエリアが設定されています。外観>ウィジェットのドロワーメニュー[上部]ドロワーメニュー[下部]にウィジェットを配置してください。

上記のドロワーメニューの表示例は、ウィジェット[E]コンタクトをドロワーメニュー[下部]に配置しています。

ページ本文設定

投稿ページと固定ページのコンテンツ幅や文字のサイズ、固定ページのタイトル、hタグの装飾などの指定が可能です。

ヘッダー幅

ヘッダー幅は、ページのタイトル表示幅を意味します。ページのタイトルの左右余白を通常全幅(左右余白なし)・狭幅から選べます。

ヘッダー幅 全幅の表示例

コンテンツ幅

コンテンツ幅とは、ページ本文の左右余白幅を意味します。ページ本文左右の余白を通常全幅(左右余白がない)・狭幅(左右余白が大きい)から選べます。また、ページ本文の外縁に枠線指定(通常[枠線]狭幅[枠線])も可能です。ページ本文の横幅を設定したい場合、1カラム(サイドバーなし)のページ幅を設定してください。

固定ページタイトル

固定ページタイトルのスタイルを指定できます。サブタイトルの配色を変更したい場合、配色設定から指定してください。

アイキャッチ画像レイアウト カバー・全幅[オーバーレイ]には適用されません。

hタグの装飾

hタグは、背景塗り潰しやリボン、吹き出し、ボーダー、波線などのデザインから指定できます。

hタグの装飾は、WordPress本体の見出しブロックに適用されます。Emanon Premium Blocksの見出し[Emanon]には適用されません。

トップページに指定した固定ページには、見出しデザインは適用されません。

hタグの装飾
hタグの装飾選択肢

SNSフォローボタン[ページ]のスタイル

SNSフォローボタン[ページ]のSNSボタンスタイルを指定します。下記はアイコンのみ(SNSブランド名を非表示にします。)の表示例です。

SNSフォローボタン[ページ]の背景画像を有効のチェックを外すと、上記のように画像なしのデザインになります。

投稿者プロフィール コンテンツ幅

投稿者プロフィールの表示幅を設定する機能です。全幅は余白なしのレイアウト、狭幅[ボーダー]は枠線付きのレイアウトです。

投稿者プロフィールの表示例

1カラム(サイドバーなし)のページ幅

1カラムレイアウト(サイドバーなし)に適用されるページ幅設定です。ページ幅の設定可能範囲は、780pxから1180pxです。

目次設定

目次に使用するリストアイコンや目次の外枠のデザイン、配色などの設定が可能です。

リストスタイルの指定

「プライマリー」と「セカンダリ」は、配色設定の指定カラーが適用されます。

目次の表示例

下記は、リストアイテム色:セカンダリ、リストリンク色:リンク、枠線色:セカンダリ、開閉ボタン色:セカンダリの設定例です。

目次の設定例

サイドバー設定

サイドバーの枠線デザインや、ウィジェットの見出しデザインを設定できます。

サイドバー設定

見出しデザイン

見出しデザインは、サイドバーに配置したウィジェットのタイトルを装飾する機能です。

12種類のデザインパターンから見出しの装飾を指定します。下記は吹き出し[角丸]と下線[ショート]の表示例です。

吹き出し[角丸]の表示例
吹き出し[角丸]の表示例
下線[ショート]の表示例
下線[ショート]の表示例

サイドバー幅

サイドバーの幅を変更する機能です。幅は、最小232px 最大332pxで指定可能です。

フッター設定 トップへ戻るボタンの配置やウィジェット見出しデザイン

パソコンで適用されるトップへ戻るボタンの配置が可能です。トップへ戻るボタンの配色は、セカンダリカラーが反映されます。ウィジェットの見出しデザインの指定や、フッターの背景画像(または動画)の配置も可能です。フッターの背景を適当する場合、フッターエリアにウィジェットの配置必要です。

フッター設定

フッターの表示例

フッター背景に動画を配置を指定できます。YouTubeを指定する場合、読み込み時間がかかる場合がありますのでご注意ください。

フッター動画配置の例

ウィジェット設定

WordPress本体のウィジェット「カテゴリー」「アーカイブ」「メニュー」のリストスタイルを指定できます。また、Emanon Premium専用の[Es]ウィジェット のタイトルを指定できます。

下記の図は、[Es]料金の配置例です。[Es]ウィジェット タイトルスタイルを下線に設定しています。