当サイト(デモサイト01)のフロントページがどのような手順で設定されているか解説します。手順に記載の詳細マニュアルへのリンクも合わせてご確認ください。

デモページのフロントページ設定

Emanon Premiumは、大きく分けて3つの機能を使用してフロントページを装飾します。

(1)Emanon設定
サイト全体のレイアウト設定や各パーツの設定、Googleアナリティクスの設定、SNSの設定など、CTAボタンの設定、広告設定などEmanonテーマのベースとなる設定を行います。

(2)外観>カスタマイズ
サイトロゴの設定、ファーストビューの設定、見出し・ボタン・サイドバーなどのザイン設定、配色設定、メニューの設定など、サイトの見た目に関する細かな設定を行います。

(3)外観>ウィジェット
フロントページの装飾に使用する[Es]の名称から始まる専用ウィジェットと、サイドバーやフッターで使用する[E]の名称から始まる専用ウィジェット、WordPress本体のウィジェットを使用します。

WordPress管理画面の設定>表示設定の「ホームページの表示」で固定ページをホームページに指定することで、ブロックエディタを使ったデザインが可能になります。

ファーストビュー設定

ファーストビューとは、フロントページの最初に表示される箇所です。下記画像に記載の番号に沿って設定手順をご案内します。

(1)電話番号・アクセス・SNSフォローボタンの設置

電話番号と営業時間、アクセスの表示手順です。WordPress管理画面>Emanon設定>タブ「CTA」に移動します。

  1. 電話番号[ヘッダーの表示を有効にする
  2. アクセス[ヘッダー]の表示を有効にする
  3. アクセス[ラベル]に文言を入力する
  4. アクセス[URL]に店舗住所や会社住所の記載がある固定ページのURLを入力する。
  5. レイアウトをヘッダー[右]にする

電話番号や営業時間は、タブ「CTA」のコンタクト設定から設定します。

詳細は、Emanon設定 CTAをご確認ください。

次にSNSフォローボタンの表示手順です。WordPress管理画面>「Emanon設定」>タブ「SNS」に移動します。

  1. SNSプロフィールURL設定にて各SNSアカウントのURLを入力
  2. SNSフォロー設定のSNSフォローボタンで表示したいSNSにチェックをいれる
  3. SNSフォローボタン[ヘッダー]の表示をヘッダー[右]に設定

詳細は、Emanon設定 SNSをご確認ください

(2)検索ボタン[ヘッダー]・コンタクトボタン[ヘッダー]

WordPress管理画面>Emanon設定>タブ「検索」に移動し、検索ボタン[ヘッダー]の表示を有効にします。

詳細は、Emanon設定 検索をご確認ください。

次にWordPress管理画面>Emanon設定>タブ「CTA」で設定に移動し、コンタクトボタン[ヘッダー]の表示を有効化してください。コンタクトボタンをクリックした際に表示されるレイアウトについては、コンタクトボタン[スタイル]で指定します。

詳細は、Emanon設定 CTAをご確認ください。

(3)ハンバーガーメニュー設定

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

上記の設定が終わりましたら、下記の手順でハンバーガーメニューの表示をおこないます。

  1. 外観 >カスタマイズ > デザイン設定 >「ハンバーガーメニュー設定」に移動
  2. ハンバーガーメニュー[PC]の表示にチェックを入れる
  3. ハンバーガーメニュー[SP]の表示にチェックを入れる
  4. ハンバーガーメニュー[追従型]の表示にチェックを入れる

詳細は、デザイン設定をご確認ください。

(4)ヘッダーレイアウト設定

ロゴマーク(サイト名)の表示位置とヘッダーメニューの表示位置を指定します。WordPress管理画面>Emanon設定>タブ「レイアウト」に移動しヘッダーレイアウトを中央に指定します。

次に外観 >カスタマイズ >「サイト基本情報」をクリックし、ロゴマークの画像をアップロードします。

詳細は、WordPress サイト基本情報の設定をご覧ください。

ヘッダーメニュー設定

メニューのデザイン設定

メニュー項目をマウスオーバーするとアニメーションを表示することができます。設定は、WordPress管理画面>外観>カスタマイズ>デザイン設定のヘッダーメニュー設定で行います。詳細は、デザイン設定をご覧ください。

メニュー下の英単語表記

メニューの下に英単語を表示したい場合、WordPress管理画面の外観>メニューから各メニューの設定項目にある「説明」に英単語を入力し保存してください。

詳細は、ヘッダーメニュー・ヘッダーメニュー[ドロップ]の設定をご確認ください。

ページ内リンクの設定

デモサイト01のヘッダーメニュー「お客様の声」をクリックすると、ページ内リンクの設定によりフロントページのお客様の声に移動します。

詳細は、ページ内リンク:スムーススクロールをご確認ください。

(5)ファーストビュー設定

デモサイト01のファーストビューは、ヘッダーアイキャッチを使用しています。

  1. 外観>カスタマイズ>ファーストビュー設定>表示設定に移動
  2. 表示設定のレイアウトをヘッダーアイキャッチに指定
  3. ヘッダーアイキャッチ設定のレイアウトをタイトルに指定
    1. タイトルや背景画像などを配置
    2. パーティクル背景の表示を有効化
    3. 区切りデサインを左斜めに指定
    4. 区切り線の配色を白#fffに指定

詳細は、ヘッダーアイキャッチの設定をご確認ください。

(6)CTA追従型設定

WordPress管理画面>Emanon設定>「CTA設定[追従型]追加」でCTAを追加します。
デモサイト01では、長方形レイアウトに指定しています。

詳細は、 CTA設定[追従型]をご確認ください。

フロントページセクション

デモサイト01の「このようなお悩みはございませんか」から「新着記事」までは、専用ウィジェットを使用しています。

フロントページ専用のウィジェット

[Es]の名称から始まる専用ウィジェットは、フロントページセクション・フッターセクション・コピーライトセクションのみで使用できます。

下記図は、デモサイト01のウィジェット配置図です。フロントページセクション[上部]にウィジェットを配置しています。

外観>ウィジェト>フロントページセクション[上部]
  1. [Es]リンクボックス:アイコンと説明文付きのボックスを表示。
  2. [Es]区切り:右斜めを指定
  3. [Es]コンテンツボックス:画像と文章を配置。
  4. [Es]バナー:ページのリンク付きのバナーボタンを表示
  5. [Es]区切り:左斜めを指定
  6. [Es]リンクボックス:アイコンと説明文付きのボックスを表示。
  7. [Es]区切り:右斜めを指定
  8. [Es]料金:料金表示を3つ表示。スライダー[SP]を有効。
  9. [Es]お客様の声:お客様の顔写真や評価点、コメントを表示。
  10. [Es]FAQよくある質問と回答を開閉式で表示。
  11. [Es]記事一覧[お知らせ]:指定カテゴリーの記事リストを表示。
  12. [Es]区切り:左斜めを指定
  13. [Es]記事スライダー:カテゴリー未選択。スライダー[SP]を有効。

フロントページ専用のウィジェットを使用する場合、フロントページ用の固定ページを作成・公開し、表示設定ホームページの表示を固定ページに指定してください。

詳細は、 フロントページの表示設定とウィジェット配置をご確認ください。

フッターセクション

フッターセクションの表示例

フッターセクションは全ページ共有の表示エリアです。デモサイト01では、[Es]コンタクトフッターセクションに配置しています。[Es]コンタクトは、Emanon設定>タブ「CTA」の設定が反映されます。

ウィジェット[E]コンタクトは、サイドバーやドロワーメニューなどセクションエリア以外で配置してください。

フッター[左]・フッター[中央]・フッター[右]・コピーライト

フッターおよびコピーライトは、全ページ共通の表示エリアです。フッターエリアは、ウィジェットを3列に分けて配置できる3カラムと、ウィジェットを4列に分けて配置できる4カラムのいずれかを指定できます。デモサイト01では、3カラムを指定してます。

レイアウトの設定は、 Emanon設定>レイアウトのフッターレイアウトをご確認ください。

(1)フッター[左]

外観>ウィジェットから[E]サイトプロフィールをフッター[左]に配置します。

(2)フッター[中央]

外観>ウィジェットから[E]人気記事をフッター[中央]に配置します。

(3)フッター[右]

外観>ウィジェットからカテゴリー(WordPress本体のウィジェット)をフッター[右]に配置します。

(4)トップへ戻るボタン

パソコンで適用されるトップへ戻るボタンの配置が可能です。トップへ戻るボタンの表示設定は、WordPress管理画面にログイン後、メニュー名「外観」>「カスタマイズ」>「デザイン設定」の「フッター設定」から行います。

トップへ戻るボタンの設定は、 カスタマイズ>デザイン設定>フッター設定をご確認ください。

(5)クレジット表記

クレジット表記は、フッターエリアの最下部に表示されるコピーライトを表示するパーツです。「Emanon設定」>「レイアウト」>「フッターレイアウト設定」で編集します。

クレジット表記の設定は、 Emanon設定>レイアウトをご確認ください。