AFFINGER7のサイト幅設定方法｜1060pxは狭い？おすすめの横幅を解説

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

この記事で解決できる悩み

AFFINGER7のサイト幅はどこで変更するの？
初期設定の1060pxは狭い？
おすすめのサイト幅は？
幅を広げるメリット・デメリットは？
記事本文の横幅も変更できる？

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7のサイト幅設定とは？

サイト幅とは、パソコンでサイトを表示したときの全体の横幅のことです。

この設定を変更すると、記事本文やサイドバー、ヘッダーなど、サイト全体のレイアウトが変わります。そのため、読みやすさやデザインの印象を左右する、とても大切な設定です。

AFFINGER7の初期設定は1060pxですが、「少し狭いかも？」と感じる方も少なくありません。

最近は横幅の広いディスプレイを使う人も増えているため、1200〜1280px程度に設定すると、余白とのバランスが良くなり、見やすく感じることがあります。

とはいえ、サイト幅は広ければ良いというわけではありません。

ブログのデザインやサイドバーの有無、画像の大きさなどによって、最適な幅は変わります。

そこで次は、「1060pxは本当に狭いのか？」について、実際の見え方を交えながら詳しく見ていきましょう。

1060pxは狭い？AFFINGER7におすすめのサイト幅

AFFINGER7の初期設定は1060pxですが、「このままでいいの？」「もっと広くした方が見やすい？」と迷う方も多いでしょう。

ここでは、1060pxの特徴と、おすすめのサイト幅について解説します。

1060pxでも問題なく使える

AFFINGER7の初期設定である1060pxは、決して狭すぎる設定ではありません。

記事本文の文字数が多いブログでも読みやすく、サイドバーとのバランスも取りやすいため、初心者でも安心して使える横幅です。

そのまま利用しても、デザインが崩れたりSEOで不利になったりすることはありません。

より見やすくしたいなら1200〜1280pxがおすすめ

最近は横幅の広いディスプレイを利用する人が増えているため、1200〜1280pxに設定すると、サイト全体がゆったりとした印象になります。

特に次のようなブログでは、少し広めに設定すると見やすくなることがあります。

アイキャッチ画像を大きく見せたい
カード型デザインを多く使っている
2カラムレイアウトを採用している
企業サイトやメディアサイトのようなデザインにしたい

AFFINGER7でサイト幅を変更する方法

AFFINGER7では、サイト全体と記事本文の幅を同じ設定画面から変更できます。

設定場所

Menu『WordPress管理画面 → AFFINGER管理 → 全体設定』をクリックします。

下へスクロールし、「サイト全体のレイアウト一括設定」を開きます。

以下の画面で、次の2つの横幅を設定できます。

PC閲覧時のサイトの幅（width※デフォルトは1060px）→ 2カラムの全体幅
PC閲覧時の1カラムのコンテンツエリアの幅（width）→ 記事本文の幅

PC閲覧時のサイトの幅（2カラム）

「PC閲覧時のサイトの幅」は、サイト全体の横幅を設定する項目です。

ヘッダーや記事本文、サイドバーなどを含めたレイアウト全体に影響するため、2カラムレイアウトを使用しているサイトでは1200px前後を目安に設定すると、バランス良く表示できます。

PC閲覧時の1カラムのコンテンツエリアの幅

「1カラム時のコンテンツの幅」は、サイドバーを表示しないページの本文幅を設定する項目です。

サイト幅とは別に設定できるため、記事本文だけを読みやすい幅に調整できます。

1カラムのページでは、1060〜1200px程度を目安にすると、文字や画像が見やすく表示されます。

サイト幅を変更したら表示を確認しよう

サイト幅を変更したら、実際の表示を確認してみましょう。設定値が同じでも、使用しているデザインや画像サイズによって見え方は変わります。

デザインのバランスをチェックする

設定を変更したら、パソコンでサイトを表示し、次のポイントを確認しましょう。

記事本文が読みやすいか
サイドバーとのバランスが良いか
ヘッダーやメニューが崩れていないか
アイキャッチ画像やサムネイルが適切な大きさで表示されているか

少しでも違和感があれば、20〜40px程度ずつ調整しながら、自分のブログに合った横幅を見つけるのがおすすめです。

スマホ表示には影響しない

サイト幅の設定は、PCで表示したときのレイアウトに適用されます。

スマートフォンやタブレットではレスポンシブデザインが適用されるため、サイト幅を変更してもスマホ表示が大きく崩れる心配はありません。

そのため、PC画面で見やすいレイアウトを基準に調整すればOKです。

よくある質問（FAQ）

AFFINGER7のサイト幅1060pxは狭いですか？

AFFINGER7の初期設定である1060pxは、決して使えない幅ではありません。

ただし、現在のPC画面や大きめの画像を使ったブログデザインを考えると、少し狭く感じる場合があります。

特に、ヘッダー画像やアイキャッチ画像を大きく表示したい場合は、1200px前後に広げることで余白が増え、見やすいサイトになります。

AFFINGER7のおすすめサイト幅は何pxですか？

ブログ用途なら、1200px前後がおすすめです。

1200px程度に設定すると、記事本文の読みやすさを保ちながら、画像やヘッダー周りにも余裕を持たせることができます。

ただし、文章中心のブログなら1060pxのままでも問題ありません。サイトのデザインや表示したいコンテンツに合わせて調整しましょう。

AFFINGER7のサイト幅はどこで変更できますか？

AFFINGER7のサイト幅は、以下の場所から変更できます。

「AFFINGER管理」→「全体設定」→「サイト全体のレイアウト一括設定」

ここで「PC閲覧時のサイトの幅」を変更します。

サイト幅を広げるとスマホ表示も変わりますか？

基本的にスマートフォン表示への影響はありません。

AFFINGER7はレスポンシブデザインに対応しているので、サイト幅の設定は主にPC表示時のレイアウトに反映されます。

そのため、PC画面で見やすい幅を基準に設定すればOKです。

サイト幅を変更した後に確認することはありますか？

はい。サイト幅を変更した後は、トップページや記事ページを実際に確認しましょう。

特に以下の部分はチェックがおすすめです。

ヘッダー画像の表示
アイキャッチ画像の大きさ
サイドバーとのバランス
文章の読みやすさ

デザインが崩れていないか確認しながら、自分のサイトに合った幅へ調整してください。

まとめ！AFFINGER7のサイト幅は1200px前後がおすすめ

AFFINGER7のサイト幅は、初期設定の1060pxでも問題なく利用できます。

ただし、現在のPC画面やブログデザインを考えると、少し余裕のある1200px前後に設定すると、記事や画像をバランスよく表示しやすくなります。

サイト幅を広げることで、ヘッダーやアイキャッチ画像も配置しやすくなり、ブログ全体をすっきり見せることができます。

一方で、サイトのジャンルやデザインによって最適な幅は変わるため、実際の表示を確認しながら調整することが大切です。

AFFINGER7を導入したら、まずは自分のサイトに合った横幅へ設定し、読みやすく快適なブログ環境を整えていきましょう。

関連記事詳しい設定方法は、以下の記事で解説しています。

: AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説

AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。