フロントページとは、ホームページ(トップページ)のことを意味します。Webサイトの入り口(フロント)として機能するために、Webサイト訪問者が探している情報をすばやく発見できるようデザインすることが大切です。また、問い合わせ購入といったアクションにも対応できるようCTAの設置も重要です。

Emanon Premiumのフロントページは、ファーストビュー機能や専用ウィジェットブロックエディタを使ってデザインできます。「直感的な操作」で「自由度の高い」表現が可能です。

デモサイト01デモサイト02デザインを再現する設定手順を公開しています。

フロントページの表示設定

フロントページの表示設定は、WordPress管理画面の設定>表示設定の「ホームページの表示」でおこないます。

表示設定

WordPress管理画面の設定>表示設定

フロントページを記事一覧の表示にしたい場合は「最新の投稿」にチェックを入れます。フロントページをデモサイト01デモサイト02のように専用ウィジェットブロックエディタで装飾したい場合「固定ページ(以下を選択)」にチェックを入れてください。

固定ページ(以下を選択)にチェックを入れると、固定ページのタイトルが選択できます。

  • ホームページ:フロントページに表示する固定ページを選択します。
  • 投稿ページ:投稿記事一覧(ブログページ)を表示する固定ページを選択します。

ホームページの表示固定ページにする場合、ホームページ用の固定ページと投稿ページ用の固定ページ事前に作成してください。

固定ページのタイトルとスラッグ例
・ホームページ:フロントページ(url スラッグ:front-page)
・投稿ページ用:ブログ(url スラッグ:blog)

最新の投稿」のレイアウト

表示設定の「ホームページの表示」が「最新の投稿」表示の場合、コンテンツエリアに公開日順に投稿ページの記事一覧が表示されます。

「最新の投稿」表示のレイアウト

外観>ウィジェットで配置できるエリアは下記となります。

外観>ウィジェット

固定ページ」のレイアウト:固定ページ本文なし

デモサイト01は、「固定ページ」のレイアウト:固定ページ本文なしでフロントページをデザインしています。

表示設定の「ホームページの表示」が「固定ページ」の場合、フロントページセクション[上部]フロントページセクション[下部]ウィジェトを配置できます。

「固定ページ」表示のレイアウト

フロントページセクションには、[Es]の名称から始まるセクション用ウィジェットをご利用ください。外観>ウィジェットの配置エリアは下記となります。

外観>ウィジェット

固定ページ」のレイアウト:固定ページ本文の表示

デモサイト02は、「固定ページ」のレイアウト:固定ページ本文ありでフロントページをデザインしています。フロントページ用の固定ページ本文の内容は、コンテンツエリアに表示されます。

表示設定の「ホームページの表示」を「固定ページ」に指定し、固定ページ本文を表示する場合、Emanon設定>タブ「レイアウト」のカラムレイアウト設定にある固定ページ[フロントページ用]本文の表示を有効にします。

デモサイト02のコンテンツエリアフロントページ用の固定ページ本文)は、「テーブルブロック」:幅広配置と「メディアと文章ブロック」:幅広配置Emanon Premium Blocksの「区切りブロック」で装飾しています。

Emanon設定>タブ「レイアウト」のカラムレイアウト設定で、固定ページ[フロントページ用]本文の表示を有効化すると、フロントページコンテンツ[上部]フロントページコンテンツ[下部]ウィジェトを配置できます。

フロントページセクションフロントページコンテンツには、[Es]の名称から始まるセクション用ウィジェットをご利用ください。外観>ウィジェットの配置エリアは下記となります。

外観>ウィジェット

レイアウトパーツの解説

フロントページのレイアウトパーツについて解説します。

ヘッダーエリア

フロントページのファーストビュー (最初に見える範囲)は、スライダーや動画などを配置が可能です。ビジネスの世界観にあったビジュアルで表現できるよう6種類のファーストビューを用意しました。

コンテンツエリア

WordPress管理画面の設定>表示設定の「ホームページの表示」で、「最新の投稿」を指定している場合、コンテンツエリアは記事一覧の表示になります。記事一覧のレイアウトは、Emanon設定>タブ[記事一覧]で設定します。

WordPress管理画面の設定>表示設定の「ホームページの表示」で、「固定ページ」を指定している場合、固定ページ本文の表示が可能です。ブロックエディタ を使ったデザイン(全幅・幅広配置)にも対応しています。固定ページ本文を表示する場合、Emanon設定>タブ「レイアウト」のカラムレイアウト設定にある固定ページ[フロントページ用]本文の表示有効にします。

サイドバー・サイドバー[固定]

サイドバーサイドバー[固定]は全ページ共通のパーツです。サイドバー[固定]は、ページのスクロールに応じて追従するパーツです。サイドバーの位置や非表示の設定は、Emanon設定>レイアウトで指定します。

フッターセクション

フッターセクションは、全ページ共通のパーツです。[Es]の名称から始まるセクション用ウィジェットの配置が可能です。例えば、[Es] コンタクトを配置すると全ページのフッターエリアにお問い合わせボタンや電話番号を表示できます。

[Es]コンタクトの配置例

フッター[左]・フッター[中央1]・フッター[中央2]・フッター[右]

フッターエリアは、フッターレイアウト設定で指定できます。ウィジェットを3列に分けた配置か、ウィジェットを4列に分けた配置が可能です。

コピーライトセクション

コピーライトセクションは、コピーライトの上部に表示される全ページ共通のパーツです。クレジットの表示内容は、Emanon設定>レイアウトで設定できます。

専用ウィジェット

Emanon Premiumのウィジェットは、セクションエリアに配置を想定した[Es]の名称から始まるウィジェットと、サイドバーやフッターの配置を想定した[E]の名称から始まるウィジェットの2種類があります。

[Es]ウィジェット:フロントページの装飾用

[Es]の名称から始まるウィジェットは、フロントページセクション[上部・下部]フロントページコンテンツ[上部・下部]フッターセクションに配置する専用ウィジェットです。固定ページ本文投稿ページ本文サイドバーなどに配置はできません。

[Es]ウィジェットは、サイドバーやフッターでは使用できません

利用できるウィジェット(一部)

デモサイト01のフロントページは[Es]ウィジェットを使ってデザインしています。下記はデモサイト01のフロントページの一部です。

赤枠の箇所は[Es] リンクボックスを使用しています。

[Es] リンクボックスの設定例

[Es]ウィジェット一覧

  • [Es] FAQ:よくある質問と回答を開閉式で表示。
  • [Es] お客様の声:お客様の顔写真や評価点、コメントをスライダー形式で表示。
  • [Es] アイコンメニュー:アイコンメニューを表示する専用ウィジェット。
  • [Es] カスタム検索:検索窓を表示。
  • [Es] カテゴリーリスト:多数のカテゴリーをリスト形式で表示。
  • [Es] コンタクト:お問い合わせボタンや電話番号などを表示。
  • [Es] コンテンツボックス:写真と文章のコンテンツを表示。
  • [Es] バナー:リンク付きのバナーボタンを表示。
  • [Es] リンクボックス:アイコンまたは画像と説明文付きのボックスを表示
  • [Es] 区切り:セクション用ウィジェットの区切り線。
  • [Es] 料金:料金表示を表示。
  • [Es] 記事スライダー:スライダー形式で投稿記事を表示。
  • [Es] 記事セクション:記事一覧を表示。
  • [Es] 記事一覧[お知らせ]:指定カテゴリーや新着記事のタイトルを表示。
  • [Es] 記事一覧[指定]:指定カテゴリーやおすすめ記事を表示。
  • [Es] ショートコード:ショートコードとHTMLコードを表示。
  • [Es] セミナー:カスタム投稿「セミナー」の記事一覧を表示。
  • [Es] 資料請求:カスタム投稿「資料請求」の記事一覧を表示。

[E]ウィジェット:サイドバー・フッター用

[E]の名称から始まるウィジェットは、サイドバーフッターの装飾用に使用するウィジェットです。

[E]ウィジェット一覧

  • [E] SNSフォロー:SNSフォローボタンを表示。
  • [E] アイコンメニュー:アイコンメニューを表示する専用ウィジェット。
  • [E] コンタクト:お問い合わせボタンや電話番号などを表示。
  • [E] サイトプロフィール:サイト紹介文を表示。
  • [E] 投稿者プロフィール:投稿者紹介文を表示。
  • [E] 人気記事:PV数が多い記事をランキングで表示。
  • [E] 目次:投稿ページ・固定ページの目次を表示。

ウィジェット配置エリア

ウィジェットは、各ウィジェットエリア(下記図の赤枠)にドラッグで配置することで有効になります。

外観>ウィジェットの表示例

また、WordPress管理画面>外観>カスタマイズ>ウィジェットプレビューを見ながらウィジェット配置状況を確認できます。

WordPress管理画面>外観>カスタマイズ>ウィジェットの場合、直感操作でウィジェットの追加や並び替えも可能です。