AFFINGER6の管理画面の初期設定ガイド｜インストール後にやるべき設定

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の管理画面で行う初期設定と、インストール後にやるべき設定項目を解説します。

AFFINGER6の初期設定を始める前に知っておきたいこと

AFFINGER6をインストールすると、管理画面にはたくさんの設定項目が並びます。
ただし、最初からすべてを完璧に設定する必要はありません。

むしろ初心者のうちは、「今の段階で本当に必要な設定」と「記事が増えてから見直せばいい設定」を分けて考えることが大切です。

AFFINGER6の初期設定は、大きく分けると次の2種類があります。

• サイト全体の動作や表示に影響する必須設定
• デザインや細かい装飾など、後から調整できる設定

この記事では、ブログ運営をスムーズに始めるために“まず押さえておきたい必須項目”だけに絞って解説します。

細かいデザイン調整や高度なカスタマイズは、記事を書き始めてからでもまったく問題ありません。

まずは「最低限ここだけやっておけばOK」という状態を作り、安心してブログ運営をスタートさせましょう。

AFFINGER6管理画面｜初期設定でまず確認する必須項目

AFFINGER6の初期設定では、管理画面の中でも特に影響範囲が広い項目から順に確認していくのがおすすめです。

このパートでは、「最初にここだけは触っておきたい」という設定を、管理画面の構成に沿って紹介していきます。

それでは順番に見ていきましょう。

WordPress管理画面から、AFFINGER管理画面を開きます。

Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理＞（AFFINGER管理）』をクリックします。

はじめにタブ｜「Save」とリンク集を最初に確認しよう

AFFINGER管理画面の『はじめに』タブをクリックします。

まずは、「はじめに（必ずお読みください）」の画面で『Save』をクリックします。

その後、表示されている内容に目を通し、必ず一読しておきましょう。

最下部にある「リンク集」は、サイト設定や記事作成の参考になるので、確認しておくのがおすすめです。

全体設定タブ｜カラーパターン・デザインパターン・フォントサイズを設定しよう

「全体設定」タブは、AFFINGER6の中でもサイト全体に影響する重要な設定が集まっている場所です。

まずは、初心者の方が必ず確認しておきたいポイントから見ていきましょう。

AFFINGER管理画面の「全体設定」タブに切り替えて、カラーとデザインパターンを設定します。

カラーパターンとデザインパターン

サイト全体のイメージは、難しい設定をしなくても簡単に整えられます。
「細かい設定は正直面倒…」「とりあえず早く記事を書き始めたい」という方は、カラーパターンから好みの色を選ぶだけで、全体がバランスよくまとまるのでおすすめです。

一方で…
「まだサイトのイメージカラーが決まっていない」「記事を書きながら、少しずつデザインを整えていきたい」
という方は、まずは以下の設定でスタートしてみましょう（おすすめ）。

この記事では、カラーパターンを『リセット』、デザインパターンを『ブログ』で解説します。

カラー設定からメニューまで一気に設定したい方はこちら！

サイトのカラーについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。

関連記事

フォントのサイズ

フォントサイズは、サイト全体の構成や記事の書き方によって最適な値が変わります。
そのため「このサイズが正解」と一概におすすめするのは難しいのが正直なところです。

とはいえ、まったく目安がないと設定しづらいですよね。
そこでここでは、AFFINGER6でフォントサイズを調整する際の基準となる参考値（初期設定の目安） を紹介します。

まず、はじめに定番となる部分のサイズのみ変更して様子を見ましょう。『基本（Pタグ 他）』が最重要です。

デフォルト値は、以下のように薄い文字（グレー表示）で入力欄内に表示されています。
数値を入力していない場合は、この表示が初期設定の値になります。

• 重要部を赤枠でマーキングしています。

フォントのサイズや行間についてもっと詳しく知りたい方は、以下の記事を参考にしてみてください。

関連記事

メニュータブ｜スマホスライドメニューと検索アイコンを設定しよう

メニュータブでは、スマホ用のスライドメニューは必ず設定しておくのがおすすめです。
細かい調整は後からでも問題ありませんが、この設定は意外と忘れがちなので、先に済ませておきましょう。

スマホスライドメニューはこんな感じです。「「絶対あった方がいいやつ！」

AFFINGER管理画面の「メニュー」タブに切り替えて、スマホスライドメニューと検索アイコンを設定します。

スマホスライドメニュー

メニューに階層がある場合、スマホでは操作が煩雑になりがちです。そのため、できるだけ同じ階層で表示する方がおすすめです。

• 「スマホスライドメニュー」の『下層リンクを最初から開く』にチェックを入れます。

検索アイコン

スマホスライドメニューの項目には「検索アイコン」があります。とても便利な機能なので、あらかじめ追加しておくのがおすすめです。

• 「検索アイコン」の『スマホヘッダーに検索アイコンを追加する』にチェックを入れます。

AFFINGER管理画面の「メニュー」タブの詳しい設定方法については、こちらの記事で解説しています。
あわせてご覧ください。

関連記事

ヘッダータブ｜スマホ・PCそれぞれのキャッチフレーズ表示を設定しよう

サイトタイトル（ロゴ画像）の上下にキャッチフレーズを表示したくないケースもよくあります。
ここでは、キャッチフレーズを非表示にする設定方法をご紹介します。
なお、この設定は PCとスマホ（タブレット含む）でそれぞれ個別に設定可能です。

AFFINGER管理画面の「ヘッダー」タブに切り替えて、スマホ（タブレット含む）とPCのみを設定します。

スマホ（タブレット含む）のみ / PCのみ

チェックの ON / OFF だけで簡単に表示を切り替えられるので、表示を確認しながら気軽に試してみてください。

• 「スマホ（タブレット含む）のみ」の『ヘッダーにキャッチフレーズを表示しない』にチェックを入れます。
• 「PCのみ」の『ヘッダー（及びフッター）にキャッチフレーズを表示しない』にチェックを入れます。

トップページタブ｜記事一覧（新着記事）を設定しよう

デフォルトで表示されるサイドバーの新着記事一覧は、表示していないサイトも多いため、ここでは非表示にする設定方法をご紹介します。

AFFINGER管理画面の「トップページ」タブに切り替え、トップページやサイドバーに表示する新着記事一覧の設定を行います。

新着記事

チェックの ON / OFF だけで簡単に表示を切り替えられるので、表示を確認しながら気軽に試してみてください。

• 「新着記事」の『トップページのサイドバーの新着記事一覧を非表示にする』にチェックを入れます。
• 「新着記事」の『下層ページのサイドバーの新着記事一覧を非表示にする』にチェックを入れます。

投稿・固定記事設定タブ｜投稿日（更新日）・アイキャッチ設定を行おう

投稿日（更新日）は、初期設定のままだと多くの記事一覧に表示されるため、ここでは表示範囲を少し制限する設定を行います。

また、デフォルトではアイキャッチ画像が非表示になっているため、表示を有効に設定します。
あわせて、アイキャッチ画像とタイトルの表示順を、一般的なレイアウト（タイトル → 画像）になるよう整えます。

AFFINGER管理画面の「投稿・固定記事」タブに切り替え、投稿日（更新日）やアイキャッチ画像の表示設定を行います。

投稿日（更新日）

記事には、投稿日だけでなく更新日も表示することで、記事の鮮度をユーザーにアピールできます。

• 更新されていない記事はマイナス効果となるので注意しましょう。

チェックの ON / OFF だけで簡単に表示を切り替えられるので、表示を確認しながら気軽に試してみてください。

• 「記事一覧・関連記事一覧の投稿日（更新日）を非表示にする 」にチェックを入れます。
• 「更新日のみ表示する（投稿日は表示しない）」にラジオボタンを切り替えます。

アイキャッチ設定

ブログのアイキャッチ画像は、記事の内容を視覚的に伝える重要な要素です。なので…基本的には表示させておくのがおすすめです。

• 「アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）」にチェックを入れます。
• 「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れます。

この設定を行うと、以下のような配置・表示になります。

アイキャッチ画像の作り方について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

関連記事

SNS / OGPタブ｜旧Twitter（現在のX）設定を行おう

ブログをSNSで紹介しやすくするために、ここでは 「X（旧Twitter）設定」 の項目をご紹介します。

投稿を目立たせて注目度を高めるポイントは、次の2つです。

• カードスタイルで大きく表示する
• ハッシュタグを付ける

AFFINGER管理画面の「SNS / OGP」タブに切り替え、旧Twitter設定の設定を行います。

旧Twitter設定

Facebookの設定項目もありますが、まずは 「X（旧Twitter）」の設定を優先するのが一般的です。

• @以下の『アカウント名』を入力します。
• 一貫性のあるハッシュタグを入力します。複数指定する場合は、カンマ区切りで入力します。
  • ツイート時に手動でハッシュタグを付けられるので、未設定でも問題ありません。
• 表示形式は、「大（summary_large_image）」 のラジオボタンを選択します。

SEOタブ｜トップタイトル・トップ用メタディスクリプションを設定しよう

トップページのタイトルとメタディスクリプションの設定がAFFINGER管理画面でできます。
WordPressのデフォルトを簡単に変えることができるのでおすすめです。

• Googleなどの検索エンジンで表示されるトップページのタイトルやスニペット（メタディスクリプション）をこの設定で自由に設定できます。
  • スニペット：検索エンジンの結果に表示される要約情報

AFFINGER管理画面の「SEO」タブに切り替え、トップタイトルとトップ用のメタディスクリプションの設定を行います。

SEO関連設定

ここで設定した内容は、Googleなどの検索エンジンの検索結果に表示されます。

• トップタイトルを書き替え（ここに記述したタイトルが優先されます）
  • 全角25文字を目安にまとめましょう。
• トップ用のメタキーワード（複数ある場合は半角カンマ「,」で区切る）
  • メタキーワードは、不要とされていますが…3〜5個を入力しても良いと思います。
• トップ用のメタディスクリプション
  • 全角120文字前後でまとめましょう。

Googleなどの検索エンジンで表示される検索結果は自動生成されるため、設定したテキストがそのまま表示されない場合があります。

AFFINGER6の初期設定｜カスタマイザーでやること2つ

ここでは、AFFINGER管理画面の初期設定に加えて、サイトデザインにオリジナリティを持たせるための基本となるカラー設定と見出しタグ設定をご紹介します。

カスタマイザー｜全体カラー設定を行おう

AFFINGER管理画面の「全体設定」タブで、デザインパターンを「リセット」に設定した場合は、カスタマイザーでメインカラーを含む主要カラーを設定しておくと、サイトにオリジナリティを出しやすくなります。

カスタマイザーを起動します。

Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

『全体カラー設定』をクリックして進みます。

上の画面にある 4つのカラー設定 を調整することで、サイト全体の配色をより細かくカスタマイズできます。

また、「簡単設定」を使用すると、パンくずリストの文字色や見出し背景色（色付きの場合は文字色）が自動的に白に変更され、デザインの統一感を保ちやすくなります。

すでにAFFINGER管理画面でカラーパターンを選択している場合は、この簡単設定を使うことで、手間をかけずにきれいに整えることができます。

• カラーパターンの色によっては、文字の色が見にくい場合があります。（個別に調整が必要）

「設定名称・設定箇所・反映場所」が把握しにくいため、 こちらの記事で詳しくご紹介しています。
あわせてご覧ください。

関連記事

カスタマイザー｜見出しタグ（hx） / テキスト設定を行おう

記事を書く上で、見出しタグ（hx）/ テキストのカスタマイズはとても重要です。

AFFINGER6では、見出しタグのデザインを細かく設定できます。記事のスタイルに合わせて、自分好みの見出しデザインを設定してみましょう。

特に記事の構成に不可欠な見出しタグ（H2〜H4）は、早めに！好みに合わせて！設定しましょう。

『見出しタグ（hx）/ テキスト』をクリックして進みます。

まとめ！AFFINGER6の管理画面の初期設定ガイド｜インストール後にやるべき設定

AFFINGER6は、インストール直後にすべてを細かく設定する必要はありません。
まずは今回ご紹介したように、デザインの基礎・表示設定・スマホ対応・SEOまわりなど、最低限押さえておきたい項目から整えていくのがポイントです。

特に…

• 全体設定タブでのデザイン・フォント設定
• スマホスライドメニューや検索アイコンの設定
• 投稿・固定記事の表示ルール
• X（旧Twitter）やSEOタブの初期設定

これらは、後回しにすると忘れがちですが、最初に設定しておくことで、記事作成に集中しやすくなります。

細かい調整や高度なカスタマイズは、記事が増えてからでも問題ありません。
まずは土台を整えて、AFFINGER6でのブログ運営をスムーズにスタートさせましょう。