AFFINGER6「全体設定」タブ完全ガイド｜サイト全体の初期設定とカスタマイズを徹底解説

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

AFFINGER6の「全体設定」タブは、サイトの見た目と基本動作をまとめてコントロールできる重要な設定画面です。

それではご覧ください。

AFFINGER6「全体設定」タブとは？サイト全体に影響する重要設定

AFFINGER6の「全体設定」タブは、サイト全体の見た目や基本的な表示ルールをまとめて設定できる項目が集まった場所です。
ここで行う設定は、特定の記事やページだけでなく、サイト全体に一括で反映されるのが大きな特徴です。

たとえば、以下のような設定がこのタブに含まれています。

• サイト全体のデザインパターンや配色
• レイアウト（横幅・カラム構成など）の基本設定
• フォントサイズや文字の表示バランス
• サムネイル画像や抜粋文の表示ルール

これらは、どれもサイトの第一印象や読みやすさに直結する要素です。

他の設定タブとの違い

AFFINGER6には「メニュー」「ヘッダー」「投稿・固定記事」など複数の設定タブがありますが、「全体設定」タブはそれらの土台になる設定を扱います。

• 個別設定よりも 優先度が高いものが多い
• 一度変更すると 複数ページに影響が出やすい
• 細かく調整する前に、まず確認しておきたい項目が多い

という特徴があるため、AFFINGER6を使い始めたら最初に一通り目を通しておきたいタブです。

初心者は「全部設定しなくてOK」

「全体設定」と聞くと、すべて細かく設定しないといけない印象を持ちがちですが、実際には 初期設定のままで問題ない項目も多く存在します。

大切なのは…

• どの設定が重要なのか
• どの設定がサイト全体に影響するのか

を理解したうえで、必要なところだけを調整することです。

この記事では、「まず押さえておくべき設定」と「後回しにしていい設定」を分けて解説していくので、設定画面を前に迷ってしまう方でも安心して読み進められます。

AFFINGER6 全体設定タブの主な設定項目一覧

AFFINGER6の「全体設定」タブには、サイト全体に影響するさまざまな設定項目が用意されています。
最初に全体像を把握しておくことで、「今どこを設定しているのか」「次に何を見ればいいのか」が分かりやすくなります。

ここでは、全体設定タブに含まれる主な項目をジャンルごとに整理して紹介します。

• 設定画面を確認しておきましょう。

Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理＞全体設定』をクリックします。

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

デザイン・見た目に関する設定

• カラーパターン
• デザインパターン（カスタマイザーの初期値及びリセット値）
• ドロップシャドウ
• テキストシャドウ
• カテゴリーリンク（サイドバー / フッター）のデザイン

👉 サイトの雰囲気や第一印象を決める重要な設定です。

レイアウト・構造に関する設定

• PC閲覧時のサイトの幅
• PC閲覧時の1カラムのコンテンツエリアの幅
• 1カラム／2カラムのレイアウト切り替え
• LP風レイアウトなどの全体構成調整
• サイドバーの表示・非表示に関わる設定

👉 レイアウト系は他の設定より優先される項目が多いため、先に確認しておくのがおすすめです。

サムネイル・一覧表示に関する設定

• アイキャッチ画像がない場合のデフォルト画像指定
• 記事一覧のサムネイル表示設定
• ブログカード・埋め込みURLのサムネイル設定
• サムネイル画像の比率や表示バランス調整

👉 記事一覧ページや内部リンクの見え方に影響します。

抜粋文・テキスト表示に関する設定

• 抜粋文の文字数設定（PC・スマホ別）
• 抜粋（概要文）の表示・非表示
• 一覧ページでのテキスト表示ルール

👉 読みやすさやクリック率にも関わるポイントです。

フォント・文字まわりの設定

• フォントサイズ（PC／タブレット／スマホ）
• 行間・文字間隔・余白の調整
• フォントの種類と反映場所（標準フォント・Googleフォント）

👉 読者の「読みやすさ」に直結する設定なので、微調整が効果的です。

デザイン・見た目に関する設定（カラーパターン・シャドウ系）

この項目では、AFFINGER6で作るサイト全体の配色や装飾の方向性を設定できます。
サイトの第一印象に直結する部分なので、「細かく作り込む前」に一度確認しておきたい設定です。

カラーパターンの設定

カラーパターンでは、サイト全体の基本カラーをまとめて指定できます。
ヘッダー・フッター・サイドバーなど、複数の箇所に共通して反映されるのが特徴です。

• サイト全体の配色を一括で変更できる
• パーツごとに色を細かく指定する手間を減らせる
• デザインに統一感を出しやすい

初心者の方は、まずはプリセットカラーをそのまま使うか、メインカラーだけを調整する程度でも十分です。

デザインパターンが「リセット」になっていると、カラーパターンが反映されない場合があるので注意してください。

以下は、デザインパターンを「ブログ」に設定した場合の表示例です。カラーやデザインを選ぶ際の参考にしてみてください。

デザインパターンの設定

デザインパターンは、サイドバーやウィジェット周りなどの装飾スタイルをまとめて切り替えられる設定です。
カラーパターンと組み合わせることで、サイト全体の雰囲気や個性を好みに合わせて調整できます。

• ノーマル（グラデーション横）
• ビジネス（グラデーション縦）
• フラット
• キューティー（ストライプ）
• ブログ 
• リセット

から、枠線の表示・非表示や背景色、ボックスデザインを簡単に切り替えることができます。

サイトのジャンルや雰囲気に合わせて選ぶだけで、デザインの完成度を一気に引き上げることができます。

以下は、デザインパターンとカラーパターンを組み合わせた場合の表示例です。サイドバーやウィジェット周りのデザインを選ぶ際の参考にしてください。

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

ドロップシャドウの設定

ドロップシャドウは、ボックスやエリアに影を付けて立体感を出すための装飾です。

• コンテンツを区切って見せたいとき
• 情報量が多いページで視線を誘導したいとき

に効果的ですが、使いすぎると逆に見づらくなることもあります。

基本的には…

• 全体では控えめ
• 必要な箇所だけで使う

という考え方がおすすめです。

その他の適応ID及びクラスは以下の通りです。（参考にしてください）

ブロック名称	適応ID及びクラス
AFFINGER：会話ふきだし	.st-kaiwa-hukidashi
AFFINGER：バナー風ボックス	.st-header-flexwrap
AFFINGER：タイトル付きフリーボックス	.freebox
AFFINGER：マイボックス	.st-mybox
AFFINGER：メモ	.clip-memobox
メインエリア	main

ドロップシャドウ（影）について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

テキストシャドウの設定

テキストシャドウは、見出しやタイトル文字に影を付ける設定です。
強調したい場面では使えますが、文章量が多いサイトでは 可読性が下がる原因になることもあります。

特別なデザイン意図がなければ、無理に設定せず オフのままでも問題ありません。

主な適応ID及びクラスは以下の通りです。（参考にしてください）

ブロック名称	適応ID及びクラス
ヘッダー	header
サイト名	.sitename a
見出しブロック（H2 / H3など）	.head-teino a

カテゴリーリンク（サイドバー / フッター）の設定

サイドバーやフッターに設置したカテゴリーリンクのカラーを、個別に設定できます。
カラーパターンとは別の色を指定できるため、カテゴリーリンクを目立たせたい場合に便利です。

以下は、カテゴリーリンク（サイドバー / フッター）にカラーを設定した場合の表示例です。
（参考にしてください）

デザイン設定で迷ったときの考え方

デザイン系の設定は…

• 「かっこよさ」より「読みやすさ」
• 「個性」より「統一感」

を優先するのがポイントです。

最初から完璧を目指さず、記事が増えてから微調整していくくらいの感覚でOKです。

レイアウト・構造に関する設定（横幅・カラム・表示優先度）

この項目では、AFFINGER6のサイト全体のレイアウト構造を設定します。
見た目だけでなく、読みやすさや回遊性にも影響するため、「全体設定」タブの中でも特に重要なパートです。

サイト全体の横幅設定

サイトの横幅は、PC表示時のコンテンツエリアの広さを決める設定です。

• 横幅が広い → 情報量を多く見せやすい
• 横幅が狭い → 文章が読みやすくなる

ブログ型サイトの場合は、デフォルト設定〜やや狭めを基準にするのがおすすめです。

無理に広げすぎると、1行あたりの文字数が増えて読みにくくなることがあります。

カラム構成（1カラム・2カラム）の設定

ここでは、サイト全体を1カラム（本文のみ）／2カラム（本文＋サイドバー）のどちらで表示するかを指定できます。

• 情報発信・ブログ向け → 2カラム
• LP・セールスページ向け → 1カラム

全体設定で指定した内容は、個別記事の設定よりも優先される場合があるため注意してください。

サイドバー表示に関する設定

サイドバーの表示・非表示や、スマホ表示時の挙動もこの項目で管理されます。

• PCでは表示、スマホでは非表示
• 特定デバイスのみ表示

といった調整が可能です。

スマホ閲覧が多いサイトでは、本文の読みやすさを優先してサイドバーを非表示にするケースも多くあります。

レイアウト設定の優先度に注意

AFFINGER6では、レイアウト関連の設定に優先順位（全体設定 ＞ 個別設定）が存在します。

そのため、個別記事で設定を変えたのに反映されない という場合は、全体設定側で上書きされていないかを確認してみてください。

レイアウト設定で失敗しないコツ

レイアウトは一度決めると、後から変更したときの影響範囲が大きい設定です。

• 記事数が少ないうちに方向性を決める
• 途中で大きく変えすぎない
• 微調整はフォントや余白で行う

この3点を意識すると、後悔しにくくなります。

最適なサイト幅の設定について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

サムネイル・一覧表示に関する設定

この項目では、記事一覧やブログカードなどで表示されるサムネイル画像の見え方を設定できます。

サムネイルは、クリック率やサイト全体の印象に影響するため、細かすぎない範囲で整えておくのがおすすめです。

アイキャッチ画像がない場合の設定

記事にアイキャッチ画像を設定していない場合でも、あらかじめ指定したデフォルト画像を表示できます。

• 画像未設定の記事があっても見た目が崩れない
• サイト全体の統一感を保てる

というメリットがあります。

記事一覧のサムネイル表示設定

トップページやカテゴリー一覧で表示されるサムネイル画像の表示・非表示を設定できます。

• サムネイルを表示する
• テキスト中心のシンプルな一覧にする

どちらも選べますが、初心者ブログの場合は表示ありがおすすめです。

ブログカード・埋め込みURLのサムネイル設定

記事内で他の記事や外部ページを紹介する際に使われるブログカードの表示設定です。

• サムネイルあり／なし
• レイアウトの種類

を選択できます。

内部リンクを多用するサイトでは、ブログカードを使うことで回遊率アップが期待できます。

サムネイル画像の比率・表示バランス

サムネイル画像の縦横比を指定することで、一覧ページの見た目をきれいに揃えることができます。

記事によって画像サイズがバラバラな場合は、この設定を使うことでズレを防止できます。

抜粋文・テキスト表示に関する設定

ここでは、記事一覧などに表示される抜粋（概要文）の扱いを設定します。

抜粋文の表示・非表示

一覧ページで抜粋文を表示するかどうかを選択できます。

• 情報量を増やしたい → 表示
• スッキリ見せたい → 非表示

どちらが正解というわけではないので、サイトの目的に合わせて選びましょう。

抜粋文の文字数設定

PC・スマホそれぞれで、表示する文字数を細かく指定できます。

スマホでは文字数を少なめにすると、スクロール量を抑えられて読みやすくなります。

フォント・文字まわりの設定

この項目は、読者の読みやすさに直結する重要設定です。

フォントサイズ・行間の調整

デバイスごとに…

• フォントサイズ
• 行間
• 余白

を調整できます。

まずはデフォルト表示を確認し、「少し大きい／小さい」と感じた部分だけを微調整するのがおすすめです。

Pタグの余白・行間・要素間の調整について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

フォントの種類（標準・Googleフォント）

AFFINGER6では、標準フォントに加えて Googleフォント を使用できます。

ただし…

• 読み込み速度に影響する場合がある
• フォントを増やしすぎると統一感が崩れる

といった点には注意が必要です。

特別な理由がなければ、1〜2種類程度に抑えるのが無難です。

Google Fontsの導入や設定について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

その他・細かい全体設定

全体設定タブには、細かな表示調整やON／OFF設定も含まれています。

ここは…

• 表示結果を見ながら調整
• 不明な項目は無理に触らない

というスタンスで問題ありません。

初心者向け｜AFFINGER6 全体設定のおすすめ初期設定まとめ

AFFINGER6の「全体設定」タブは項目が多いため、最初からすべてを細かく設定する必要はありません。

ここでは、初心者がまず押さえておくと安心な設定だけを厳選してまとめます。

最初にチェックしておきたい設定（必須）

• サイト全体のレイアウト（横幅・カラム）
  • → デフォルト〜やや狭め／2カラムが無難
• サムネイル表示の有無
  • → 記事一覧・ブログカードは「表示あり」がおすすめ
• フォントサイズ（特にスマホ）
  • → 小さすぎないかを必ず実機で確認
• 抜粋文の表示設定
  • → 一覧ページで「表示する」かどうかを決める

余裕が出てから調整すればOKな設定

• カラーパターンの細かなカスタマイズ
• デザインパターンの変更
• ドロップシャドウ・テキストシャドウ
• Googleフォントの追加設定

👉 これらは 後からでも簡単に変更可能 なので、記事が増えてから調整しても問題ありません。

触らなくても困らない設定

• 意味がよく分からない表示ON／OFF項目
• 見た目の違いが分かりにくい装飾設定

👉 無理に触ると、「どこを変えたか分からなくなる」原因になります。

初心者が意識したい考え方

• 全体設定は「完璧」を目指さない
• 読みやすさと統一感を最優先
• 記事を書きながら少しずつ調整

このスタンスで進めれば、失敗しにくいです。

まとめ！AFFINGER6「全体設定」は土台づくりの設定

AFFINGER6の「全体設定」タブは、サイト全体のデザイン・構造・読みやすさを決める土台となる設定です。

すべてを完璧に設定する必要はありませんが、

• どの設定が全体に影響するのか
• どこが優先されるのか

を理解しておくだけでも、設定ミスや後戻りを大きく減らせます。

まずは基本を押さえ、記事を増やしながら少しずつ調整していくのがおすすめです。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／