Emanon設定 レイアウトでは、ヘッダーメニューのレイアウトや、ページの種別ごとにサイドバーの位置指定や、1カラム(サイドバーなし)の設定をおこないます。

レイアウト設定

WordPress管理画面にログイン後、メニュー名「Emanon設定」をクリックし、タブ「レイアウト」をご覧ください。

Emanon設定ーレイアウト

ローディングアニメーション設定

Webサイト にアクセスした際に、ローディングアニメーションを表示できます。ローディングアニメーションは、フロントページのみ適用される設定です。

ファーストビュー設定にて、読み込みに時間がかかる「ヘッダー動画」を指定している場合、ローディングアニメーションの表示を推奨します。

ローディングアニメーション設定

アニメーションの表示」の指定をテキストすると、LOADINGの文字が表示されます。

アニメーションの表示:テキストの表示例

アニメーションの表示」をアイコンを指定した場合、サークルアニメーションが表示されます。アイコン画像に画像の追加をした場合、サークルアニメーションの代わりに追加した画像が一定時間表示され、フェードアウトします。

クッキー有効にすると、2回目以降のアクセスはローディングアニメーションを非表示にします。ただし、WEBブラウザを閉じた場合、クリッキーは初期化されます。

ヘッダーレイアウト設定

ヘッダーレイアウトは、ヘッダーメニューの表示レイアウトを指定できます。ヘッダー幅は全幅に着替えることが可能です。

ヘッダーレイアウト設定

オーバーレイ[フロントページ]有効にすると、ヘッダーメニューがファーストビューに被さる配置になります。オーバーレイはフロントページのみ適用されます。

オーバーレイ[フロントページ]無効
オーバーレイ[フロントページ]無効の表示例
オーバーレイ[フロントページ]有効
オーバーレイ[フロントページ]有効の表示例

ページ種別単位で、サイドバー表示位置・表示なしを指定する機能です。2カラム[L]はサイドバー左配置、1カラムはサイドバーなし、2カラム[R]はサイドバー右配置です。

カラムレイアウト設定

カラムレイアウト設定が反映されるページ

  • フロントページ:サイトのトップページです。設定>表示設定で設定。
  • ブログページ記事一覧を表示する固定ページです。設定>表示設定で設定。
  • 投稿ページ:投稿>新規追加で作成するページです。
  • 固定ページ:固定ページ>新規追加で作成するページです。
  • アーカイブページ:カテゴリーやタグ、日付を軸に表示される記事一覧です。
  • 検索結果ページ:検索ウィジェットで検索した結果を表示するページです。
  • 404ページ:存在しないページにアクセスがあった場合に表示するページです。

フロントページ・ブログページの設定手順

固定ページの新規追加でフロントページ用の固定ページとブログページ用の固定ページを作成します。ページのタイトル名は任意ですが、ここでは、フロントページ用の固定ページを「フロントページ」としました。

固定ページーフロントページ

ブログページ用の固定ページは「ブログ」、パーマリンクはblogとしました。

固定ページーブログ

次のステップは表示設定です。設定>表示設定に進み、ホームページの表示で固定ページにチェックを入れ、ホームページ: フロントページ、投稿ページ:ブログと指定します。

表示設定

以上の設定で、ホームページ:フロントページがサイトのトップページに指定され、投稿ページ:ブログが投稿一覧を表示します。

メニュー設定

外観>メニューにあるメニュー項目を追加からフロントページーフロントページと、ブログー投稿ページを、メニューに追加します。

下記の例では、メニューに追加したフロントページの名称を短く表記するため、ナビゲーションラベルを「Home」に変更しました。

メニュー設定ー表示設定

固定ページ:フロントページの本文を表示する設定

設定>表示設定ホームページ: に指定した固定ページの本文を表示したい場合、固定ページ[フロントページ用]本文の表示有効にしてください。

固定ページ[フロントページ用]本文の表示

記事一覧レイアウト設定

記事一覧の表示レイアウトを指定します。各ページ項目の末尾にある[PC]は、パソコンでWebサイトを表示した場合のレイアウト指定です。同様に[SP]スマホでWebサイトを表示した場合のレイアウト指定です。

  • [リスト]1カラム:アイキャッチ画像、タイトル、リード文の構成。
  • [カード]1カラム:SPのみ指定可能。アイキャッチ画像、タイトルの構成。
  • [カード]2カラム:アイキャッチ画像、タイトルの構成。
  • [カード]3カラム:PCのみ指定可能。アイキャッチ画像、タイトルの構成。
記事一覧レイアウト設定

記事一覧でアイキャッチ画像表示する場合、Emanon設定 記事一覧の「アイキャッチ画像」の表示を有効にします。

記事一覧
記事レイアウト [カード型]2カラムの表示例

フッターレイアウト設定

フッターエリアは、ウィジェットを3列に分けて配置できる3カラムと、ウィジェットを4列に分けて配置できる4カラムのいずれかを指定できます。

フッターウィジェット設定

クレジット表記

フッターコピーライト
クレジットの表示例

クレジット表記は、フッターエリアの最下部に表示されるコピーライトを表示するパーツです。クレジット表記は、次の3つから選択できます。

  • 現在の年 サイト名:[表示例]© 2020 Emanon Premium
  • 公開年 – 現在の年 サイト名 : [表示例]© 2019 – 2020 Emanon Premium
    [注意]サイト公開年は必須入力になります。
  • 自由設定:コピーライトを自由に編集できます。HTMLタグの使用が可能です。
クレジット表記

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

フローティングメニュー
スマホ:投稿ページの表示例

ハンバーガーメニュー[追従型]とは、スマホでWebサイトを表示した際に画面の右端に表示されるフローティングボタンです。ハンバーガーメニュー[追従型]をクリックすると、画面の左端からドロワーメニュー[SP]が表示されます。

ハンバーガーメニュー[追従型]を有効にする場合、外観>メニューのメニュー設定からメニューを作成し、メニューの位置ドロワーメニュー[SP]にチェックを入れてください。

メニューの位置