デザイン設定は、サイトの細部を指定する機能群です。フォントスタイルやハンバーガーメニューの表示指定、ドロワーメニュー内のリストデザイン、ページ本文のコンテンツ幅や、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の４種類から選択できます。
Noto Sans JP、Noto Serif JPは、Google fontsが提供するWebフォントを読み込む設定です。Google fontsを利用するメリットして、端末に依存せず指定のフォントを表示できる点が挙げられます。
ヘッダーメニュー設定
ヘッダーメニューの設定で指定したメニューのデザイン設定機能です。マウス指定時のメニューアニメーションや、メニュー項目の区切り線の追加などが設定できます。
ヘッダーメニューのアニメーション［ホバー］
アニメーション［ホバー］は8種類+なしの指定が可能です。下記の動画は下線［左右］・下線［拡張］・点の動作サンプルです。
アニメーション［ホバー］の下線の高さ
下線・下線［左右］・下線［拡張］に適用される設定です。下線の高さを1pxから5pxまで指定できます。下記の図は、下線の高さを2pxに指定した例です。
アニメーション［ホバー］の位置
アニメーションの位置をメニュー項目の下部に変更したい場合、標準から下部に変更してください。
現在地メニューのエフェクトを有効
アニメーション［ホバー］で指定したエフェクトが現在地メニューで維持され、現在閲覧中のページが視覚的にわかるようになります。
区切り線の追加
メニューの項目間に区切り線を追加したい場合、チェックを入れてください。
ハンバーガーメニュー設定
ハンバーガーメニューとは、縦並び線「≡」のアイコンです。ハンバーガーメニューをクリックすると、ドロワーメニューが左からスライドインします。
ハンバーガーメニューは、パソコンとスマホの両方で表示可能です。ハンバーガーメニュー［PC］を有効にすると、パソコンのヘッダーエリア右端に「≡」ボタンが表示されます。
ハンバーガーメニュー［SP］を有効にすると、スマホのヘッダーエリア右端に「≡」ボタンが表示されます。
ハンバーガーメニュー［追従型］を有効にすると、スマホの画面右下にハンバーガーメニューの「≡」ボタンが表示されます。
ハンバーガーメニュー［追従型］を常時表示する設定
ハンバーガーメニュー［追従型］のアニメーション［無効］をオンにすると、ハンバーガーメニュー［追従型］のフェードアウト・アニメーションが停止し、常時表示の状態になります。
ドロワーメニューの設定
ハンバーガーメニューをクリックすると、左からスライドインするドロワーメニューは、外観＞メニューの「メニューの位置」でドロワーメニュー［PC］（パソコンで表示） またはドロワーメニュー［SP・TB］（スマホとタブレットで表示）を有効にしてメニュー設定をします。
詳細は、ドロワーメニュー［PC］ ・ドロワーメニュー［SP］の設定を参照してください。
ドロワーメニュー設定
メニュー名「外観」＞「カスタマイズ」＞「デザイン設定」>ドロワーメニュー設定をクリックし、ドロワーメニューのデザインを設定します。
タイトルは、メニューの上部に表示される文言を入力します。例 メニュー 空白でも問題はありません。
メニュー：親リスト要素と子リスト要素は、ドロワーメニュー内に表示されるメニューリストに適用されます。見出しデザインと見出し配置は、ドロワーメニュー内に設置したウィジェットのタイトルに適用されます。
ドロワーメニューは、ウィジェットエリアが設定されています。外観＞ウィジェットのドロワーメニュー［上部］・ドロワーメニュー［下部］にウィジェットを配置してください。
上記のドロワーメニューの表示例は、ウィジェット［E］コンタクトをドロワーメニュー［下部］に配置しています。
ページ本文設定
ページタイトルの余白やページのコンテンツ幅、固定ページのタイトル、hタグの装飾、１カラムのページ幅などの指定が可能です。hタグの装飾は、WordPress本体の見出しブロックに適用されます。
ヘッダー幅
ヘッダー幅は、ページのタイトル表示幅を意味します。ページのタイトルの左右余白を通常・全幅（左右余白なし）・狭幅から選べます。
コンテンツ幅
コンテンツ幅とは、ページ本文の左右余白幅を意味します。ページ本文左右の余白を通常・全幅（左右余白がない）・狭幅（左右余白が大きい）から選べます。また、ページ本文の外縁に枠線指定（通常［枠線］・狭幅［枠線］）も可能です。ページ本文の横幅を設定したい場合、1カラム（サイドバーなし）のページ幅を設定してください。
固定ページタイトル
固定ページタイトルのスタイルを指定できます。サブタイトルの配色を変更したい場合、配色設定から指定してください。
アイキャッチ画像レイアウト カバー・全幅［オーバーレイ］には適用されません。
hタグの装飾
hタグは、背景塗り潰しやリボン、吹き出し、ボーダー、波線などのデザインから指定できます。
hタグの装飾は、WordPress本体の見出しブロックに適用されます。Emanon Premium Blocksの見出し［Emanon］には適用されません。
フロントページに指定した固定ページには、見出しデザインは適用されません。
SNSフォローボタン［ページ］のアイコンスタイルと背景画像の表示制御
SNSフォローボタン［ページ］のSNSボタンスタイルを指定します。下記はアイコンのみ（SNSブランド名を非表示にします。）の表示例です。
SNSフォローボタン［ページ］の背景画像を有効のチェックを外すと、上記のように画像なしのデザインになります。
投稿者プロフィール コンテンツ幅
投稿者プロフィールの表示幅を設定する機能です。全幅は余白なしのレイアウト、狭幅［ボーダー］は枠線付きのレイアウトです。
1カラム（サイドバーなし）のページ幅
１カラムレイアウト（サイドバーなし）に適用されるページ幅設定です。ページ幅の設定可能範囲は、780pxから1180pxです。
1カラムのページ幅：フロントページ
フロントページのコンテンツ幅を最小値：780px 最大値：1180pxで指定できます。この設定はウィジェットのフロントページセクションの幅にも適用されます。
目次設定
目次に使用するリストアイコンや目次の外枠のデザイン、配色などの設定が可能です。
「プライマリー」と「セカンダリ」は、配色設定の指定カラーが適用されます。
目次の表示例
下記は、リストアイテム色：セカンダリ、リストリンク色：リンク、枠線色：セカンダリ、開閉ボタン色：セカンダリの設定例です。
サイドバー設定
サイドバーの枠線デザインや、ウィジェットの見出しデザインを設定できます。
見出しデザイン
見出しデザインは、サイドバーに配置したウィジェットのタイトルを装飾する機能です。
12種類のデザインパターンから見出しの装飾を指定します。下記は吹き出し［角丸］と下線［ショート］の表示例です。
サイドバー幅
サイドバーの幅を変更する機能です。幅は、最小232px 最大332pxで指定可能です。
フッター設定 トップへ戻るボタンの配置やウィジェット見出しデザイン
パソコンで適用されるトップへ戻るボタンの配置が可能です。トップへ戻るボタンの配色は、セカンダリカラーが反映されます。ウィジェットの見出しデザインの指定や、フッターの背景画像（または動画）の配置も可能です。フッターの背景を適当する場合、フッターエリアにウィジェットの配置が必要です。
フッターの表示例
フッター背景にMP4形式の動画を配置を指定できます。
ウィジェット設定
従来のウィジェット「カテゴリー」「アーカイブ」「メニュー」のリストスタイルを指定できます。また、Emanon Premium専用の［Es］ウィジェット のタイトルを指定できます。
下記の図は、［Es］料金の配置例です。［Es］ウィジェット タイトルスタイルを下線に設定しています。
