操作マニュアル

目次
  1. WordPress管理画面へのログイン方法
  2. WordPress管理画面の説明
    1. 投稿
    2. メディア
    3. 固定ページ
    4. コメント
    5. ニュース
    6. お問い合わせ
    7. 外観
    8. エディター設定
    9. Emanon設定
    10. Emanonパーツ
    11. プラグイン
    12. ユーザー
    13. ツール
    14. All-in-One WP Migration
    15. 設定
  3. ユーザーの追加方法
    1. ダッシュボードにログイン
    2. 「ユーザー」メニューを開く
    3. ユーザー情報を入力
    4. ロール（役割）の設定
  4. ユーザープロフィールの編集方法
    1. プロフィール編集画面を開く
    2. プロフィール情報の編集
    3. 変更を保存
  5. 投稿ページの新規追加・編集方法
    1. 新規投稿の作成方法
    2. エディタの編集方法
    3. アイキャッチ画像の追加方法
    4. 投稿ページの公開ステータスについて
    5. パーマリンクの設定方法
    6. カテゴリーの追加・編集方法
    7. タグの追加方法
    8. 特定の要素を非表示（無効）にする設定
    9. noindex,nofollow設定
    10. meta descriptionの設定
    11. カスタムCSS・カスタムJavaScriptの設定方法
    12. 投稿ページの複製方法
    13. 投稿ページの削除方法
  6. 固定ページの新規追加・編集方法
    1. 親ページと子ページの設定方法
    2. トップページとブログ一覧ページについて
  7. ニュース（お知らせ）の新規追加・編集方法
  8. トップページのファーストビューの設定方法
  9. ヘッダーメニューの固定表示（追従）設定について
  10. CTAの設定について
    1. CTA設定【追従型】
    2. CTA設定【ページ】
    3. CTAの表示設定
  11. ウィジェットの設定について
    1. サイドバー
    2. フッター セクション
    3. フッター［左］、フッター［中央］、フッター［右］
  12. フォームの追加・編集方法
    1. フォームの新規追加
    2. フォームの設定項目
    3. 自動送信メールの設定方法
    4. フォームの埋め込み方法
    5. フォームのデザイン（CSS）調整
    6. サンクスページへのリダイレクト設定
  13. 404エラーページの設定
  14. 使用しているプラグイン
    1. All-in-One WP Migration
    2. Contact Form 7
    3. Emanon Premium Blocks
    4. Yoast Duplicate Post
    5. Converter for Media
  15. カスタムCSSでデザインを調整している箇所
    1. TOPページのお知らせ一覧
    2. カテゴリラベルの背景色指定
    3. 記事タイトルのフォントサイズ
    4. アーカイブページのタイトルのフォントサイズ
    5. ヘッダーアイキャッチのボタンサイズ調整
    6. ホバー時のアニメーション
    7. パンくずリストの表示位置

WordPress管理画面へのログイン方法

アドレスバーに、WordPressの管理画面のURLを入力します。

https://yourwebsite.com/wp-login.php

※上記の「yourwebsite.com」はご自身のサイトURLに置き換えてください。

正しくURLを入力すると、「WordPressログイン画面」が表示されます。画面に「ユーザー名またはメールアドレス」と「パスワード」を入力する項目があることを確認してください。

ご自身が設定されたユーザー名（またはメールアドレス）とパスワードの入力が完了したら、「ログイン」 ボタンをクリックしてください。ログインに成功すると、WordPressの管理画面が表示されます。

WordPress管理画面の説明

WordPress管理画面の各項目について簡単に説明します。

投稿

定期的に追加・更新されるブログ記事コンテンツを管理する項目です。「新規投稿を追加」 で新しい記事を作成できます。

メディア

画像や動画、PDFファイルなどのメディアファイルを管理します。「新しいメディアファイルを追加」 でファイルをアップロードしたファイルは、投稿や固定ページなどコンテンツ内で使用できます。

固定ページ

「会社概要」や「サービス紹介」 など、変更頻度が少ないページを作成・管理します。トップページも固定ページで作成しています。投稿とは異なり、カテゴリー分けはありません。

コメント

記事へのコメントを管理します。コメント欄を有効にしている場合（デフォルトでは無効にしています）、コメントの承認、編集、削除が可能で、スパムコメントの管理もここで行います。

ニュース

新着情報（お知らせ）記事を作成するためのカスタム投稿です。
もっと詳しく：カスタム投稿［ニュース］ | Emanon Premiumマニュアル

お問い合わせ

フォーム生成プラグイン「Contact Form 7」 に関する設定項目です。フォームの生成や調整、フォーム埋め込みタグの取得ができます。

外観

サイトの外観のカスタマイズやウィジェットの配置、メニューの設定を行えます。編集頻度が高いのは「カスタマイズ」 「ウィジェット」 「メニュー」 です。

「カスタマイズ」 について

サイトのデザインや配色を細かくカスタマイズできる機能。
もっと詳しく：外観（カスタマイズ）設定 | Emanon Premiumマニュアル

「ウィジェット」 について

サイトの特定箇所（ウィジェットエリア）に任意のパーツを挿入できる機能。フッターやサイドバーに共通要素を一括設定できます。

「メニュー」 について

ヘッダーメニューやフッターメニューに表示させる項目を設定できる機能。

もっと詳しく：ヘッダーメニューの設定 | Emanon Premiumマニュアル
もっと詳しく：フッターメニュー［PC・TB］ ・ フッターメニュー［SP］の設定 | Emanon Premiumマニュアル

エディター設定

投稿や固定ページのエディタの書式ツールバーの設定を行えます。

書式ツールバーはボタンやアンダーライン、アイコンなどをワンクリックで追加できる機能で、エディター設定では、それらのデザインを調整できます。基本的にはデフォルト設定で問題ありません。

Emanon設定

Emanon Premiumのベースとなるレイアウト設定や内部動作の設定機能です。
もっと詳しく：Emanon設定 | Emanon Premiumマニュアル

Emanonパーツ

テーマ「Emanon」で使用できるパーツ（カスタムブロックやウィジェット）を設定し、ページに挿入することができます。
もっと詳しく：Emanonパーツ ブロックパターン機能 | Emanon Premiumマニュアル

プラグイン

WordPressに機能を追加するプラグインを管理します。新規インストール、既存プラグインの有効化・無効化、更新などを行います。

ユーザー

WordPressサイトにアクセス可能なユーザーを管理する設定。新規ユーザーの追加、権限の設定、ユーザー情報の編集が可能です。

ツール

WordPressサイトのインポート・エクスポートやデータのバックアップなど、管理に役立つツールがまとめられています。

All-in-One WP Migration

サイトの移行やバックアップ用プラグイン「All-in-One WP Migration」 の設定項目です。サイト全体をバックアップし、新しいサーバーへの移行が簡単に行えます。

設定

一般設定（サイト名、URLなど）、投稿設定、表示設定など、サイトの基本設定を行います。

ユーザーの追加方法

社内のスタッフや外部ライターなど、WordPressにユーザーを追加するには、以下の手順で簡単に行えます。

ダッシュボードにログイン

管理者アカウントでWordPressのダッシュボードにログインします。

「ユーザー」メニューを開く

左サイドバーにある「ユーザー」メニューをクリックし、「新規ユーザーを追加」 を選びます。

ユーザー情報を入力

新しいユーザーの「ユーザー名」「メールアドレス」など、必要な情報を入力します。パスワードは自動生成されますが、任意のパスワードに変更することも可能です。

ロール（役割）の設定

「役割」メニューから、追加するユーザーの権限を選び、「新規ユーザー追加」 をクリックして完了です。

購読者
ログインしてコンテンツを閲覧したり、プロフィールを管理したりすることができますが、投稿や編集などの権限はありません。会員制サイトで登録者限定のコンテンツを見せる場合や、コメントを残せるようにする場合に付与します。普通のサイトではあまり使用されない権限です。

寄稿者
投稿を作成して保存することはできますが、自分の投稿を公開することはできません。編集者や管理者が投稿を確認して公開する必要があります。外部ライターやゲスト寄稿者などに適しています。

投稿者
自分の投稿を作成し、公開および編集することができますが、他の人の投稿やページにはアクセスできません。社内ライターや信頼できる外部ライターなど、一定の公開権限を与えても問題ない場合に設定します。

編集者
サイト内のすべての投稿や固定ページを作成・編集・公開・削除することができ、他のユーザーの投稿も管理できます。ただし、サイトの設定やプラグインの管理はできません。コンテンツ運営を任されている編集者、または複数のライターの投稿を管理・確認する役割の人（ディレクターなど）に適しています。

管理者
サイト全体を管理する権限があり、ユーザーの追加・削除、テーマの変更、プラグインのインストール・設定、サイト設定の変更が可能です。イトの全体管理を行うウェブ担当者やオーナー向けの権限。全権限を持つため、信頼できる人にのみ設定します。

ユーザープロフィールの編集方法

ユーザープロフィールを編集する方法は以下の通りです。

プロフィール編集画面を開く

「ユーザー」 メニューから「プロフィール」 をクリックします。

管理者の場合は「ユーザー」 >「ユーザー一覧」 を選択して、他のユーザーのプロフィールも編集できます。

プロフィール情報の編集

連絡先情報や表示名、プロフィール情報、プロフィール写真など、必要な情報を編集します。

ここに入力したプロフィール情報とプロフィール写真は、ブログ記事下部のプロフィール（著者情報）に反映されます。

変更を保存

編集が完了したら、ページ下部の「プロフィールを更新」 をクリックして変更を保存します。

これで、ユーザープロフィールの編集が完了します。

投稿ページの新規追加・編集方法

投稿ページ（ブログ記事を投稿するフォーマット）の操作方法を解説します。

新規投稿の作成方法

新規投稿を作成するには、「新規投稿を追加」 をクリックします。

エディタの編集方法

以下がエディタ画面です。ここに記事タイトルや本文を記入します。

エディタは、WordPress 5.0から導入されたブロックエディタ（正式名称Gutenberg）仕様です。テキスト、画像、見出し、ボタン、動画、表などのコンテンツを「ブロック」 として追加でき、各ブロックを追加・移動・削除・編集することで、自由にレイアウトを組み立てることができます。

Emanon Premiumテーマ専用のブロックエディター装飾プラグイン「Emanon Premium Blocks」 をインストールしているため、高機能でリッチなブロックパーツを使用可能です。WordPressのデフォルトのブロックパーツの機能も補強されており、ページのレイアウトやデザインの自由度が高いのが特徴。

全てのブロックパーツの詳細な説明は、以下の公式マニュアルを参照ください。
もっと詳しく：ブロックエディタ | Emanon Premiumマニュアル

アイキャッチ画像の追加方法

「投稿」 タブの「アイキャッチ画像を設定」 をクリックします。

メディアライブラリの中から画像を選ぶか、新規でアップロードします。

設定したアイキャッチ画像は、記事タイトル下に表示されます。

一覧ページのサムネイル画像にも適用されます。

投稿ページの公開ステータスについて

投稿ページの公開ステータスは、5つあります。

WordPressの公開ステータスについて、以下に簡単に説明します。

下書き作成中のコンテンツを保存するステータスです。公開前に編集や確認が必要な場合に使用します。サイト訪問者には表示されません。
保留中編集が完了し、管理者や他の権限を持つユーザーの承認待ちの状態です。特に複数人で運営しているサイトで、承認プロセスを導入する際に便利です（普通はあまり使いません）。
非公開コンテンツを公開しない状態です。ログインしている管理者や編集者など、特定のユーザーにのみ表示されますが、一般の訪問者には見えません。
予約済み記事やページを指定した日時に自動で公開するステータスです。予約時間が来るまで一般の訪問者には表示されませんが、予約時刻になると自動的に公開されます。
公開済みサイト訪問者に表示される状態です。コンテンツがWeb上で一般に公開され、検索エンジンにもインデックスされる可能性があります。

一般的な運用フローは以下の通りです。

1
執筆・作成 → 下書き保存

記事を作成し、まずは「下書き」として保存。下書き状態で内容の見直しや修正を行います。

2
確認・テスト → 非公開保存（必要に応じて）

必要に応じて「非公開」にし、他のメンバーや関係者と内容を確認します。

3
最終確認・公開設定

確認が完了したら「公開済み」に設定するか、特定の日時に公開したい場合は「予約済み」に設定してスケジュール公開します。

パーマリンクの設定方法

パーマリンク（URLの末尾）を任意の文字列に設定するには、「投稿」 タブの「リンク」 をクリックします。

投稿内容に合った、簡潔な英数字を設定するのがおすすめです。

なお、これは「設定」→「パーマリンク設定」 で、投稿のURL構造を「投稿名」 などに設定している場合が前提です。

「基本」 や「数字ベース」 にした場合、パーマリンクの文字列は変更できないためご注意ください。

カテゴリーの追加・編集方法

投稿のカテゴリーは、「投稿」 > 「カテゴリ」 から新規追加や編集ができます。

もっと詳しく：カテゴリーページに固定ページ本文を表示する設定 | Emanon Premiumマニュアル
もっと詳しく：カテゴリーページのレイアウト | Emanon Premiumマニュアル

作成したカテゴリは投稿ページの以下から選択できます。

タグの追加方法

タグとは、WordPressの投稿に関連するキーワードを追加する機能で、コンテンツを整理するために使用されます。タグはカテゴリーよりも細かいトピックやテーマを表し、訪問者が特定のトピックに関連する投稿を簡単に見つけられるようにする役割を持っています。

カテゴリーは大まかな分類を行うために使用しますが、タグはより具体的なキーワードを追加するため、1つの投稿に複数のタグを付けることができます。例えば、「イタリア料理」というカテゴリーに「パスタ」「トマト」「ヘルシー」などのタグを付けることで、訪問者がより詳細な興味に沿って投稿を見つけやすくなります。

タグを追加するには、投稿の編集画面の「タグ」 欄に追加したいタグを入力し、「追加」をクリックします。

特定の要素を非表示（無効）にする設定

投稿ページの特定要素をワンクリックで非表示（無効）にすることもできます。

「この記事はアイキャッチを表示したくない」 「目次は必要ない文量だから消したい」 など、目的に応じて柔軟にページの表示要素やレイアウトを変更できる便利機能です。

noindex,nofollow設定

投稿ページごとに、noindexとnofollowをワンクリックで設定できます。

noindex は、「このページを検索結果に表示しないでください」 という指示です。「会員専用ページ」や「サンクスページ」 など、検索結果に表示する必要がないページに設定します。

nofollow は、「検索エンジンがこのリンクをランキングアルゴリズムに使用しない」 という指示です。
検索エンジンに、特定のリンク先を評価させないようにするために使います。

一般的な投稿にnofollowを適用するケースは稀ですが、広告コンテンツやアフィリエイトリンクが主な目的のページでは、Googleに「広告的な内容」と認識させ、サイト全体の評価に影響を与えないようにするため、リンクにnofollowを付けることがあります。

meta descriptionの設定

投稿ページのエディタ下部に、meta descriptionの入力欄があります。

最大120文字程度で、ページの内容を端的に表現した概要文を記述してください。以下はGoogleの公式ドキュメントです。meta description作成の参考になります。
参考：スニペットの管理・メタ ディスクリプションについて | Google 検索セントラル | ドキュメント

カスタムCSS・カスタムJavaScriptの設定方法

投稿ページのエディタ下部に、CSSとJavaScriptの入力欄があります。

ここに入力したCSSとJavaScriptは、その投稿ページのみに適用されます。一部ページのみ見た目や挙動をカスタマイズしたい際にお使いください。

投稿ページの複製方法

納品サイトには「Yoast Duplicate Post」 というプラグインがインストールされており、「複製」 をクリックすることで、ページを簡単に複製できます。

下書き状態で複製されるので、いきなり公開されることはありません。

投稿ページの削除方法

投稿一覧の中から削除したい投稿を見つけます。投稿タイトルの上にマウスを移動すると、いくつかのオプションが表示されるので、その中の「ゴミ箱へ移動」 をクリックします。

すると、ゴミ箱に移動されます。完全に削除したい場合、ゴミ箱に移動し、完全に削除したい投稿を選択して「完全に削除する」 をクリックします。

固定ページの新規追加・編集方法

固定ページの操作方法は、投稿ページの場合とほぼ同じです。

新規固定ページを作成するには、「新規固定ページを追加」 をクリックします。

エディタの編集方法も、基本的には投稿ページと変わりません。投稿ページの「エディタの編集方法」 の解説部分と同じ要領です。ただ、固定ページには、カテゴリやタグによる分類機能がない点が投稿ページと異なります。

その代わりに、固定ページには親ページと子ページの階層設定が可能です。

この例では、サービス一覧を親ページにして、サービス詳細を子ページとして設定して、ページの階層構造を明確にしてます。URLも親子関係に沿った階層構造（例：example.com/service/service-1）で表示されます。

親ページと子ページの設定方法

親ページと子ページの設定は、固定ページの編集画面から簡単に行えます。

「固定ページ」 タブの中に「親」 という項目があり、そこから親ページを設定できます。

「親」ドロップダウンリストから、指定したい親ページを選択します。

親ページが指定できたら、「更新」 または「公開」 ボタンをクリックして設定を保存します。これで設定完了です。設定後、子ページは親ページの配下に階層的に整理され、URLも親ページに従った構造になります（例：example.com/親ページ/子ページ）。

トップページとブログ一覧ページについて

トップページは固定ページで作成しています。「固定ページ一覧」 > 「トップページ ー フロントページ」 から編集可能です。

「設定」 > 「表示設定」 の「ホームページの表示」 セクションで、この固定ページをトップページとして表示させる設定をしています。

ホームページ = トップページという認識でOKです。

ブログ一覧ページも固定ページで作成しています。

ブログ一覧として使いたい固定ページには、内容を記述する必要はありません。このページは、「設定」 > 「表示設定」 の「ホームページの表示」 セクションで、「投稿ページ」として指定すると、ブログ記事の一覧が自動的に表示されるようになります。

そのため、投稿ページとして使う固定ページは、タイトルだけ設定しておけば問題ありません。

ニュース（お知らせ）の新規追加・編集方法

ニュース（お知らせ）の操作方法は、投稿ページの場合とほぼ同じです。

新規ニュースページを作成するには、「新規投稿を追加」 をクリックします。

エディタの編集方法も、基本的には投稿ページと変わりません。投稿ページの「エディタの編集方法」 の解説部分と同じ要領です。

トップページのファーストビューの設定方法

トップページのファーストビューの設定は、「外観」 ＞「カスタマイズ」 ＞「ファーストビュー設定」 から行います。

「表示設定」 で「ヘッダーアイキャッチ」 を設定しています。

ヘッダーアイキャッチ以外にも、合計6種類のパターンから選択可能です。本テンプレートでは、背景画像＆キャッチコピー＆CTAボタンというシンプルさがビジネスサイトと相性が良い、ヘッダーアイキャッチを選択しています。

ファーストビューはフロントページの冒頭に表示するデザインパーツです。キャッチコピーや動画、パーティクルアニメーションなど多彩な表現が可能なヘッダーアイキャッチ、アニメーション付き画像スライダー、投稿ページをスライダー表示するコンテンツスライダー、投稿ページをボック形式で表示するピックアップスライダー、固定ページのアイキャッチ画像を使ったページボックス、フルスクリーンで動画を表示するヘッダー動画の6種類から指定できます。
引用：WordPressテーマ Emanon Premium | WordPressテーマ Emanon

ヘッダーアイキャッチの内容を編集するには、「ヘッダーアイキャッチ設定」 をクリックします。

レイアウトや文言など、細かい設定を行えます。

もっと詳しく：ヘッダーアイキャッチ設定 | Emanon Premiumマニュアル

ヘッダーメニューの固定表示（追従）設定について

ヘッダーメニューはPC、モバイルともに固定表示にしており、スクロールに追従します。

「外観」 > 「メニュー」 からヘッダーメニューの編集を選択して、「ヘッダーメニュー［固定：ロゴ付き ］」 のチェックを外すと、固定表示は解除されます。

スマホ、タブレットの場合は、「外観」 > 「カスタマイズ」 > 「デザイン設定」 > 「ハンバーガーメニュー設定」 と移動して、「ハンバーガーメニュー［SP・TB］の固定」 のチェックを外すと、固定表示は解除されます。

固定表示はユーザーの利便性を向上させるため、基本的にはチェックを入れたままを推奨します。

もっと詳しく：ヘッダーメニューの設定 | Emanon Premiumマニュアル

資料ダウンロードページやお問い合わせなど、メニューからの離脱を防ぎたいページにはそもそもヘッダーメニューを表示していません。

そのため、スクロール追従の固定表示メニューも追加CSSで非表示（無効）にしています。
もっと詳しく：CSSを使ったカスタマイズ | Emanon Premiumマニュアル

以下、スクロール追従の固定表示メニューを非表示にするCSSです。

/* ヘッダーを固定表示させないページ */
.page-id-1777 .l-header-menu-fixed-logo__inner,
.page-id-1818 .l-header-menu-fixed-logo__inner,
.page-id-417 .l-header-menu-fixed-logo__inner,
.page-id-1802 .l-header-menu-fixed-logo__inner,
.page-id-1783 .l-header-menu-fixed-logo__inner,
.page-id-1791 .l-header-menu-fixed-logo__inner,
.page-id-799 .l-header-menu-fixed-logo__inner,
.page-id-2856 .l-header-menu-fixed-logo__inner,
.page-id-1904 .l-header-menu-fixed-logo__inner,
.page-id-1914 .l-header-menu-fixed-logo__inner,
.page-id-768 .l-header-menu-fixed-logo__inner,
.page-id-1928 .l-header-menu-fixed-logo__inner,
.page-id-1910 .l-header-menu-fixed-logo__inner,
.page-id-1922 .l-header-menu-fixed-logo__inner,
.page-id-682 .l-header-menu-fixed-logo__inner {
	display: none;
}

idの数字部分に、該当の固定ページのidを指定することで、そのページはヘッダーメニューの固定表示がOFFになります。

固定ページのidは、固定ページ一覧画面で、固定ページのタイトルにマウスカーソルを合わせると出てくるURLから確認できます。

この場合だと、「post=1802」 の数字が、固定ページのidです。

CTAの設定について

Emanon Premiumはビジネスサイト構築に特化したテンプレートであり、中でも、リード獲得のためのCTA（Call To Action）機能が豊富です。ブログ記事下部やスクロール追従など、多くのCTAを設定できます。そのための設定を解説します。

CTA設定【追従型】

スクロールに追従して表示されるCTAです。

追従型のCTAは、「Emanon設定」 > 「CTA［追従型］一覧」 から管理できます。

作成した追従型CTAが一覧表示されており、「新規投稿を追加」 からCTAの追加も可能です。具体的な作成方法は、以下の公式マニュアルを参照ください。
もっと詳しく：CTA設定［追従型］ | Emanon Premiumマニュアル

CTA設定【ページ】

主に投稿ページの下部に表示させるCTAです。

ページ下部のCTAは、「Emanon設定」 > 「CTA［ページ］一覧」 から管理できます。

作成した追従型CTAが一覧表示されており、「新規投稿を追加」 からCTAを追加も可能です。具体的な作成方法は、以下の公式マニュアルを参照ください。
もっと詳しく：CTA［ページ］ | Emanon Premiumマニュアル

CTAの表示設定

作成したCTAの表示設定は、「Emanon設定」 >「CTA表示設定」 から行います。ページ単位やカテゴリ単位で、表示させるCTAを設定可能です。

また、投稿ページや固定ページの編集画面から、表示するCTAを個別設定することも可能です。ここでの設定は「CTA表示設定」 よりも優先適用されます。

もっと詳しく：各CTAの表示設定 | Emanon Premiumマニュアル

ウィジェットの設定について

WordPressのウィジェットとは、Webサイトのサイドバーやフッター、その他のウィジェットエリアに追加できる小さなコンテンツブロックです。ウィジェット機能を使えば、コードをいじることなく、Webサイトの外観や機能を簡単にカスタマイズできます。

ウィジェットを使うには、WordPressの管理画面から「外観」 >「ウィジェット」 を選択します。

ウィジェットを配置できる「ウィジェットエリア」 が表示されるので、それぞれのウィジェットエリアを選択して、任意のコンテンツを追加していきます。投稿や固定ページのエディタと同じように、ブロックパーツを組み合わせて直観的に編集できます。

納品サイトでは、以下のウィジェットエリアにコンテンツを設定しています。

  • サイドバー
  • フッターセクション
  • フッター
  • フッター［左］、フッター［中央］、フッター［右］

サイドバー

ブログ記事のサイドバーに表示させるウィジェットです。人気記事ランキングを表示させています。

「[E] 人気記事」 のブロックパーツを配置しています。

フッター セクション

フッター部分に共通で表示させるウィジェットです。資料ダウンロードとお問い合わせという、2つの主要なCTAを配置しています。

「セクション［Divider］ブロック」 のブロックパーツの中に、2カラムで資料ダウンロード、お問い合わせのエリアを配置しています。

フッター［左］、フッター［中央］、フッター［右］

全ページのフッター部分に共通で表示させるウィジェットです。会社概要やサイト内の主要ページへのリンクを載せています。

フッター［左］、フッター［中央］、フッター［右］、それぞれ、ウィジェットエリアは「段落」 のブロックパーツの組み合わせでシンプルに構成しています。

フッター［左］
フッター［中央］
フッター［右］

フォームの追加・編集方法

Emanon Premium自体には、フォーム生成機能はありません。フォームを生成して埋め込むには、外部のフォーム生成ツールもしくはフォーム生成プラグインを使います。

今回は「Contact Form 7」 というプラグインを使っています。基本的な使い方は、開発元の公式ドキュメントも併せて参照ください。

フォームの新規追加

「お問い合わせ」 > 「新規追加」 を選択します。

フォームの設定項目

タイトルの入力欄には、フォームのタイトルを記述します。訪問者に表示される部分ではないので、管理しやすいタイトルを付けます。

フォームの入力欄を編集するには、「フォーム」 のタブを選択して、編集画面を開きます。テキストやメールアドレス、電話番号、送信ボタンなど、各種テンプレートパーツが揃っているので、それらを選択して埋め込んでいきます。

フォームの見た目は以下のような外観です（CSSでデザインを調整済み）。

「必須」 の項目を表示したい場合は、以下のようにしてください。

なお、「placeholder」 の記述部分は、フォームの入力欄にあらかじめ記入されている薄いサンプルテキストであり、ユーザーに入力例を示してフォーム入力を促す効果があります。”お名前を記載ください” などのテキスト部分を編集することで、表示が変わります。

自動送信メールの設定方法

Contact Form7では、管理者宛てのメールと送信者宛てのメール、2種類の自動送信メールをフォームごとに設定できます。
参考：メールのセットアップ | Contact Form 7 [日本語]

自動送信メールの内容を編集するには、「メール」 のタブを選択して、編集画面を開きます。

管理者宛ての自動送信メールの設定方法

画面上部は管理者宛ての自動送信メールの設定項目です。それぞれの意味を解説します。

送信先
メールの送信先アドレスを指定する項目です。通常、フォームの管理者が受け取るためのメールアドレスを入力します。複数の受信者が必要な場合は、カンマで区切って複数のアドレスを指定できます。
例: admin@example.com, support@example.com

送信元
メールが送信される送信元アドレスを指定します。一般的に、ウェブサイトのドメインに属するメールアドレスを使用します。

題名
メールの件名を指定する項目です。フォーム送信時に管理者が受け取るメールの件名として表示されます。「新規お問い合わせ」 「〇〇〇の資料がダウンロードされました」 など、分かりやすい内容にすると良いでしょう。

追加ヘッダー
追加のメールヘッダーを設定するオプションで、例えば「Cc」や「Bcc」を指定することができます。以下は設定例です。

Cc: another@example.com
Cc（カーボンコピー）は他の受信者にもコピーを送る際に使用します。

Bcc: hidden@example.com
Bcc（ブラインドカーボンコピー）は他の受信者に隠してメールを送信するために使います。

Reply-To: [your-email]
Reply-To ヘッダーを追加すると、返信がユーザーのメールアドレスに返るように設定可能です。

メッセージ本文
送信されるメールの内容を指定するメインの部分です。ここで、フォームに入力された各フィールドの値を挿入するショートコードを使って、管理者宛のメール内容を作成します。

以下の内容でお問い合わせがありました。
会社名: [company]
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [tel-581]
件名: [your-subject]
お問い合わせ内容:
[your-message]

以上が、管理者宛ての自動送信メールの設定です。

送信者宛ての自動送信メールの設定方法

送信者宛て自動送信メールを設定するには、編集画面下部の「メール（2）を使用」 にチェックを入れます。

そうすると、編集項目が出てきます。

それぞれの意味を解説します。

送信先
送信先は、ユーザーが入力したメールアドレスに設定します。通常、[your-email] のように、ユーザーがフォームに入力したメールアドレスフィールドのショートコードを指定します。

送信元
メールの送信元アドレスを設定する項目です。ここでは、サイトのドメインに属するメールアドレスを使用するのが一般的です。support@yourdomain.com などのサポート用メールアドレスも適しています。

題名
自動返信メールの件名を設定します。送信内容確認メールであることをわかりやすくするために、「お問い合わせありがとうございます」や「資料ダウンロード完了しました」といった表現が一般的です。

追加ヘッダー
追加ヘッダーには特に設定が必要ないことが多いですが、Reply-Toを設定しておくと、ユーザーが自動返信メールにそのまま返信できるようになります。例えばsupport@yourdomain.com のように、ユーザーが返信しやすいサポート用のメールアドレスを設定しておくと便利です。

メッセージ本文
自動返信メールの内容で、ユーザーに送信内容の確認や受付完了を知らせます。
通常、感謝の言葉や返信までの目安時間、資料ダウンロードフォームであれば資料のダウンロードリンクなどを記載します。

以上が、送信者宛ての自動送信メールの設定です。

フォームの埋め込み方法

作成したフォームを埋め込むには、「Contact Form7」 のブロックパーツを使うのが簡単です。

作成済みのフォームをプルダウンから選択できますので、埋め込みたいフォームを選びます。

ページを保存すると、以下のようにフォームが表示されます。

フォームのデザイン（CSS）調整

Contact Form7はデフォルトの状態では特に装飾されていません。そのままでは見た目があまり良くないため、CSSでフォームのデザインを調整する必要があります。CSSは「外観」 > 「カスタマイズ」 > 「追加CSS」 に記述しています。

参考：CSSを使ったカスタマイズ  | Emanon Premiumマニュアル

ここに以下のCSSを記述して、フォームをデザインしています。

/* Contact Form7のデザイン */
/* フォーム全体のスタイル */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
	padding: 20px;
}

/* ラベルと入力欄の余白 */
.wpcf7-form p {
  margin-bottom: 20px;
}

/* ラベルの赤い「必須」マーク */
.wpcf7-form .red{
  font-size: 12px;
  color: red;
  margin-left: 5px;
}

/* テキスト入力欄のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
	background-color: #f5f8fa; /* 入力フィールドの背景色 */
}

/* テキストエリアのスタイル */
.wpcf7-form textarea {
  height: 200px;
}

/* プレースホルダーの文字色 */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #bbb;
  font-size: 14px;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  background-color: #007BFF;
  color: #fff;
  border: none;
  width:100%;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #007BFF;
  opacity: 0.8; /* 透明度を下げる */
}

/* 必須フィールドエラーの強調（Contact Form 7デフォルトのクラスを使用） */
.wpcf7-not-valid {
  border: 1px solid red;
}

/* 必須フィールドメッセージ */
.wpcf7-response-output {
  margin-top: 20px;
  color: red;
  font-size: 14px;
  text-align: left;
}

なお、フォームに枠線を付けて表示したいページには、そのページの編集画面のカスタムCSSにコードを追加記述します。

/* フォームに枠線追加 */
.wpcf7-form {
  border: 1px solid #e6e6e6;
}

このコードを追加すると、フォームに枠線が付きます。

サンクスページへのリダイレクト設定

フォームを送信すると、以下のようなサンクスページ（完了ページ）にリダイレクトするよう設定しています。

各フォームの編集画面に、サンクスページへのリダイレクト設定を記述しています。

「location = 'https://sample-site-btob.com/thanks-document-company';」

ここのURL部分を任意のURLに書き換えると、リダイレクト先を変えることができます。

404エラーページの設定

存在しないURLをユーザーが叩いた際に表示される404エラーページですが、デフォルトでは、以下のようなページが表示されます。

これでも悪くはありませんが、少しデザイン性や利便性が低いので、独自の404エラーページにリダイレクトさせる設定をしています。

これは固定ページ（タイトル：404エラーページ）で作成しています。

リダイレクト設定は、「外観」 > 「テーマファイルエディター」 から、テーマのための関数 (functions.php)にコードを記述しています。

function redirect_404() {
	if (is_404()) {
    	wp_redirect('https://sample.bizsite-create.com/not-found/');
    	exit();
	}
}
add_action('template_redirect', 'redirect_404');
?>

このコードは、404エラーが発生した際に、指定したURL（https://sample.bizsite-create.com/not-found/）に自動でリダイレクトする設定を行っています。これで、固定ページで作成したオリジナルの404ページに誘導できるわけです。

使用しているプラグイン

使用しているプラグインのリストです。Emanon Premiumは高機能なテンプレートなので、多くの機能がテーマ自体に完備されています。過剰にプラグインをインストールする必要はないので、最小限に留めることをおすすめします。

All-in-One WP Migration

WordPressサイトのデータ（データベース、メディアファイル、テーマ、プラグイン）を簡単にエクスポート・インポートできるプラグインです。サイトのバックアップや移行作業を手軽に行うことができ、特にサーバー間での引っ越しに便利です。
公式：All-in-One WP Migration and Backup – WordPress プラグイン

Contact Form 7

シンプルで柔軟なお問い合わせフォームを作成できるプラグインです。フォームのデザインや設定を自由にカスタマイズでき、多くのサイトで利用されています。また、スパム対策機能も備えています。
公式：Contact Form 7 – WordPress プラグイン

Emanon Premium Blocks

Emanon Premiumテーマ専用のブロックエディター用のプラグインです。Emanon Premiumテーマに最適化されたブロックが提供されており、ページや記事のデザインを簡単に作成・カスタマイズできます。
参考：ブロックエディタ

Yoast Duplicate Post

投稿や固定ページを簡単に複製するためのプラグインです。既存の投稿をコピーして編集することができ、同じフォーマットの投稿を素早く作成する際に役立ちます。テンプレート化したいコンテンツを多く扱う場合に便利です。
公式：Yoast Duplicate Post – WordPress プラグイン

Converter for Media

メディアファイル（特に画像）をWebPなどの軽量な形式に変換するプラグインです。画像のファイルサイズを減らしてサイトの読み込み速度を向上させ、ページの表示パフォーマンスを改善します。
公式：Converter for Media – 画像最適化 | WebP & AVIF に変換 – WordPress プラグイン

カスタムCSSでデザインを調整している箇所

Emanon Premiumのデフォルトの機能では対応できない箇所は、カスタムCSSでデザインやレイアウトを調整しています。
もっと詳しく：CSSを使ったカスタマイズ | Emanon Premiumマニュアル

TOPページのお知らせ一覧

TOPページのお知らせ一覧は投稿一覧［Info］のブロックパーツで作成しています。このブロックパーツは、デフォルトだと記事タイトルのフォントサイズが小さすぎるのですが、サイズを変更する機能がありません。そのため、以下のCSSを適用してフォントサイズを変更しています。

/* お知らせ一覧のフォントサイズ */
.epb-info-list__item .epb-info-list__title{
	font-size:18px !important;
}

@media screen and (min-width: 600px) and (max-width: 767px) {
    /* タブレット用 */
	.epb-info-list__item .epb-info-list__title{
	font-size:16px !important;
}
}

@media screen and (max-width: 599px) {
    /* スマホ用 */
	.epb-info-list__item .epb-info-list__title{
	font-size:16px !important;
}
}

また、以下のCSSで下線を追加して、見やすいデザインに調整しています。

/* お知らせ一覧のボーダー */
.epb-info-list__item{
		border-bottom:2px solid #F2F3F3;
	margin-bottom:20px;
}

カテゴリラベルの背景色指定

ブログ一覧（https://sample.bizsite-create.com/blog/）やお知らせ一覧（https://sample.bizsite-create.com/news/）のカテゴリラベルの配色設定です。

/* カテゴリラベルの背景色指定 */
.cat-name{
	background-color:#333333 !important;
}

background-colorの値を変更すると、カテゴリラベルの色が変わります。

記事タイトルのフォントサイズ

ブログ記事やお知らせのタイトルのフォントサイズを調整しています。PC、タブレット、スマホ、それぞれ個別に指定。

/* 記事ページのtitleのサイズ調整 */
.article-title {
    font-size: 32px;
}

/* 記事ページのtitleのサイズ調整（タブレット） */
@media screen and (min-width: 600px) and (max-width: 767px) {
    /* タブレット用 */
    .article-title {
        font-size: 28px;
    }
}

/*記事ページのtitleのサイズ調整（スマホ） */
@media screen and (max-width: 599px) {
    /* スマホ用 */
    .article-title {
        font-size: 24px;
    }
}

アーカイブページのタイトルのフォントサイズ

ブログ一覧やカテゴリ一覧、お知らせ一覧のタイトルのフォントサイズを調整しています。PC、タブレット、スマホ、それぞれ個別に指定。

/* アーカイブページのtitleのサイズ調整 */
.archive-title{
    font-size: 42px !important;
}

/* アーカイブページのtitleのサイズ調整（タブレット） */
@media screen and (min-width: 600px) and (max-width: 767px) {
    /* タブレット用 */
    .archive-title {
        font-size: 38px !important;
    }
}

/* アーカイブページのtitleのサイズ調整（スマホ） */
@media screen and (max-width: 599px) {
    /* スマホ用 */
    .archive-title {
        font-size: 32px !important;
    }
}

ヘッダーアイキャッチのボタンサイズ調整

PC、タブレットのみ、ファーストビューのヘッダーアイキャッチのボタンのサイズを調整しています（デフォルトだと縦幅が小さく目立たないため）。

/* ヘッダーアイキャッチのボタンサイズ調整 */
@media (min-width: 1024px) {
  /* PC用のスタイル */
  .main-visual__btn-left .c-btn__outline,
	.main-visual__btn-right .c-btn__outline,
	.main-visual__btn .c-btn__outline{
    padding-bottom:10px;
    padding-top:10px;
    padding-right:60px;
    padding-left:60px;
    margin:auto;
    font-size:18px;
    font-weight:bold;
  }
}

@media (min-width: 601px) and (max-width: 1023px) {
  /* タブレット用のスタイル */
  .main-visual__btn-left .c-btn__outline,
  .main-visual__btn-right .c-btn__outline,
	.main-visual__btn .c-btn__outline{
    padding-bottom:10px;
    padding-top:10px;
    padding-right:80px;
    padding-left:80px;
    margin:auto;
    font-size:16px;
    font-weight:bold;
  }
}

padding-bottom、padding-topはボタン内の上下の余白です。padding-right、padding-leftは左右の余白です。数字を大きくするほど余白が大きくなります。

ホバー時のアニメーション

リンクを設定した要素のホバーアニメーションを指定しているCSSです。

/* リンクにホバーした時、画像が少し透明（80%の不透明度）になる設定 */
a:hover img {
    opacity: 0.8; /* ホバー時に画像が少し透明に */
}

/* 画像の透明度が変化する際に0.3秒かけてアニメーションする設定 */
a img {
    transition: opacity 0.3s ease;
}

/* ホバー時に下線を表示 */
.l-contents a:hover {
    text-decoration: underline;
}

画像を透過させるアニメーション（opacity）と、その速度を制御する設定（transition）、下線表示の設定をしています。

パンくずリストの表示位置

一部のページではデザインの観点から、以下のように、セクション［Divider］ブロックの内側にパンくずリストを表示させています。

該当する固定ページの編集画面のカスタムCSSに記述しています（そのページだけにCSSが適用）。

/* ヘッダーの相対位置を設定 */
header {
  position: relative;
}

/* パンくずリストのスタイル */
.breadcrumb {
  position: absolute; /* ヘッダー内で絶対配置 */
  z-index: 10; /* ヘッダー上に重なるよう設定 */
}

/* パンくずリストのリンクスタイル（必要に応じて調整） */
.breadcrumb a {
  text-decoration: none; /* 下線を削除 */
}

.breadcrumb a:hover {
  text-decoration: underline; /* ホバー時の下線表示 */
}