
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マニュアル

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

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

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

ユーザープロフィールの編集方法
ユーザープロフィールを編集する方法は以下の通りです。
1. プロフィール編集画面を開く
「ユーザー」 メニューから「プロフィール」 をクリックします。

管理者の場合は「ユーザー」 >「ユーザー一覧」 を選択して、他のユーザーのプロフィールも編集できます。
2. プロフィール情報の編集
連絡先情報や表示名、プロフィール情報、プロフィール写真など、必要な情報を編集します。

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

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

これで、ユーザープロフィールの編集が完了します。
投稿ページの新規追加・編集方法
投稿ページ(ブログ記事を投稿するフォーマット)の操作方法を解説します。
新規投稿の作成方法
新規投稿を作成するには、「新規投稿を追加」 をクリックします。

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

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

Emanon Premiumテーマ専用のブロックエディター装飾プラグイン「Emanon Premium Blocks」 をインストールしているため、高機能でリッチなブロックパーツを使用可能です。WordPressのデフォルトのブロックパーツの機能も補強されており、ページのレイアウトやデザインの自由度が高いのが特徴。
全てのブロックパーツの詳細な説明は、以下の公式マニュアルを参照ください。
もっと詳しく:ブロックエディタ | Emanon Premiumマニュアル
アイキャッチ画像の追加方法
「投稿」 タブの「アイキャッチ画像を設定」 をクリックします。

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

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

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

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

投稿内容に合った、簡潔な英数字を設定するのがおすすめです。
なお、これは「設定」→「パーマリンク設定」 で、投稿のURL構造を「投稿名」 などに設定している場合が前提です。

「基本」 や「数字ベース」 にした場合、パーマリンクの文字列は変更できないためご注意ください。
カテゴリーの追加・編集方法
投稿のカテゴリーは、「投稿」 > 「カテゴリ」 から新規追加や編集ができます。

もっと詳しく:カテゴリーページに固定ページ本文を表示する設定 | Emanon Premiumマニュアル
もっと詳しく:カテゴリーページのレイアウト | Emanon Premiumマニュアル
作成したカテゴリは投稿ページの以下から選択できます。

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

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

noindex は、「このページを検索結果に表示しないでください」 という指示です。「会員専用ページ」や「サンクスページ」 など、検索結果に表示する必要がないページに設定します。
nofollow は、「検索エンジンがこのリンクをランキングアルゴリズムに使用しない」 という指示です。
検索エンジンに、特定のリンク先を評価させないようにするために使います。
meta descriptionの設定
投稿ページのエディタ下部に、meta descriptionの入力欄があります。

最大120文字程度で、ページの内容を端的に表現した概要文を記述してください。以下はGoogleの公式ドキュメントです。meta description作成の参考になります。
参考:スニペットの管理・メタ ディスクリプションについて | Google 検索セントラル | ドキュメント
カスタムCSS・カスタムJavaScriptの設定方法
投稿ページのエディタ下部に、CSSとJavaScriptの入力欄があります。

ここに入力したCSSとJavaScriptは、その投稿ページのみに適用されます。一部ページのみ見た目や挙動をカスタマイズしたい際にお使いください。
投稿ページの複製方法
「Yoast Duplicate Post」 というプラグインがインストールされており、「複製」 をクリックすることで、ページを簡単に複製できます。

下書き状態で複製されるので、いきなり公開されることはありません。
投稿ページの削除方法
投稿一覧の中から削除したい投稿を見つけます。投稿タイトルの上にマウスを移動すると、いくつかのオプションが表示されるので、その中の「ゴミ箱へ移動」 をクリックします。

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

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

エディタの編集方法も、基本的には投稿ページと変わりません。投稿ページの「エディタの編集方法」 の解説部分と同じ要領です。
トップページとブログ一覧ページについて
トップページは固定ページで作成しています。「固定ページ一覧」 > 「トップページ ー フロントページ」 から編集可能です。

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

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

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

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

事例・実績の新規追加・編集方法
事例・実績ページを作成するには、「新規投稿を追加」 をクリックします。

エディタの編集方法は、通常の投稿と同じです。
もっと詳しく:カスタム投稿[商品紹介] | Emanon Premiumマニュアル
事例一覧ページの出力情報の編集箇所
事例一覧ページには、事例・実績の概要を表示できます(赤枠箇所)。

こちらの情報は、編集ページの以下で制御できます。

もっと詳しく:カスタム投稿[商品紹介] | Emanon Premiumマニュアル
一覧ページの編集方法
通常投稿やカスタム投稿の一覧ページ(アーカイブページ)のタイトルやリード文の編集方法を解説します。

通常投稿の場合
「Emanon設定」 > 「記事一覧」 > 「ブログページ設定」 から、タイトルやサブタイトル、リード文を編集できます。

投稿のカテゴリのアーカイブページの場合は、「投稿」 > 「カテゴリ」 から、該当のカテゴリの編集をクリックします。

カテゴリーページ設定から、タイトルやサブタイトル、リード文を編集できます。

カスタム投稿の場合
「Emanon設定」 > 「カスタム投稿」 の各種タクソノミー設定から、タイトルやサブタイトル、リード文を編集できます。

カスタム投稿のカテゴリのアーカイブページの場合は、カスタム投稿のCATから、該当のカテゴリの編集をクリックします。

カテゴリーページ設定から、タイトルやサブタイトル、リード文を編集できます。

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

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

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

もっと詳しく:ヘッダーメニューの設定 | Emanon Premiumマニュアル
資料ダウンロードページやお問い合わせなど、メニューからの離脱を防ぎたいページにはヘッダーメニューを表示していません。

スクロール追従の固定表示メニューも追加CSSで非表示(無効)にしています。
もっと詳しく:CSSを使ったカスタマイズ | Emanon Premiumマニュアル
以下は、スクロール追従の固定表示メニューを非表示にするCSSです。
/* ヘッダーを固定表示させないページ */
.page-id-8623 .l-header-menu-fixed-logo__inner,
.page-id-8638 .l-header-menu-fixed-logo__inner,
.page-id-682 .l-header-menu-fixed-logo__inner {
display: none !important;
}
idの数字部分に、該当のページのidを指定することで、そのページはヘッダーメニューの固定表示がOFFになります。

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

この場合だと、「8623」 がページ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)調整
「外観」 > 「カスタマイズ」 > 「追加CSS」 に、フォームの外観をカスタマイズするコードを記述しています。

ここに以下の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://sample02.bizsite-create.com/thanks-contact/';」
ここのURL部分を任意のURLに書き換えると、リダイレクト先を変えることができます。
404エラーページの設定
存在しないURLをユーザーが叩いた際に表示される404エラーページですが、デフォルトでは、以下のようなページが表示されます。

デフォルトではデザイン性や利便性が少し低いので、独自の404エラーページにリダイレクトさせる設定をしています。

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

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

function redirect_404() {
if (is_404()) {
wp_redirect('https://sample02.bizsite-create.com/not-found/');
exit();
}
}
add_action('template_redirect', 'redirect_404');
?>
このコードは、404エラーが発生した際に、指定したURL(https://sample02.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 プラグイン
Post Types Order
管理画面の記事一覧から、ドラッグ&ドロップで簡単に記事の並べ替えができるプラグインです。投稿やカスタム投稿一覧ページでの記事の並び順をコントロールできます。
公式:Post Types Order– WordPress プラグイン
Simple Cloudflare Turnstile
Cloudflareが提供する無料のCAPTCHA代替サービスをWordPressサイトに簡単に導入できるプラグインです。
公式:Simple Cloudflare Turnstile– WordPress プラグイン
カスタムCSSでデザインを調整している箇所
カスタムCSSでデザインやレイアウトを調整している箇所をご説明します。
もっと詳しく:CSSを使ったカスタマイズ | Emanon Premiumマニュアル
カテゴリラベルの背景色・マージン・文字サイズ

投稿や各種カスタム投稿のカテゴリラベルの各種調整です。
/* カテゴリラベルの背景色・マージン・文字サイズ指定 */
.cat-name{
background-color:#000000 !important;
margin-top:-12px;
font-size:12px !important
}
background-colorの値を変更すると、カテゴリラベルの色が変わります。margin-topの値を変更すると、カテゴリラベルの位置が動きます。font-sizeの値を変更すると、文字サイズが変わります。
投稿一覧の背景色・マージン

投稿一覧[Info]のカテゴリラベルの各種調整です。
/* 投稿一覧の背景色・マージン指定 */
.epb-post-list__term-name{
background-color:#000000;
margin-top:-12px;
}
background-colorの値を変更すると、カテゴリラベルの色が変わります。margin-topの値を変更すると、カテゴリラベルの位置が動きます。
記事タイトルのフォントサイズ

ブログ記事やお知らせのタイトルのフォントサイズを調整しています。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;
}
}
ホバー時のアニメーション

リンクを設定した要素のホバーアニメーションを指定している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; /* ホバー時の下線表示 */
}
また、CSSの記述に加えて、セクション[Divider]ブロックの「マージントップ」 にチェックを入れてください。
