SWELLでコンテンツの横幅を変更する方法

SWELLでコンテンツの横幅を変更したい

SWELLでは、コンテンツ（サイト）の横幅を変更できます。

コンテンツの横幅を変更すると、パソコンで見た時の記事本文が書かれているエリアのサイズを変更できます（サイドバーの幅は変わりません）。

SWELLでコンテンツの横幅を変更する手順

コンテンツの横幅は「カスタマイズ」から変更できます。

WordPressの左メニュー「外観」＞「カスタマイズ」＞「サイト全体設定」＞「基本デザイン」に移動します。

この中にある「コンテンツ幅の設定」で横幅を変更できます。

下記の値がデフォルト設定です。

この数値を変更して、「公開」ボタンをクリックすれば、サイトに反映されます。

変更が反映されない

設定を公開したのに見た目が変わらない場合、多くはキャッシュが原因です。

「Ctrl＋F5」でページを更新して確認しましょう。

それでも反映されない場合は、管理画面側のキャッシュが残っている可能性があります。

管理画面からログアウトして、確認してください。

もしくは、ブラウザのシークレットウィンドウを使って確認もできます。

背景を白にすると幅が変わる点に注意

意外と見落としがちなのが、「コンテンツの背景を白にする」設定です。

設定は同じ「基本デザイン」にあります。

この設定は、背景色をグレーにしつつ本文エリアだけ白色を保つ機能ですが、オン・オフを切り替えると余白のバランスが変わり、体感的な本文の横幅も変わります（SWELL公式マニュアル「サイトのベースとなるデザイン・レイアウトの設定方法」）。

コンテンツ幅の数値だけを見て設定すると、実際の見え方とズレることがあるので、背景を白にする予定がある場合は、先にこの設定を決めてから幅を調整するのがおすすめです。

パソコンで読みやすい文字数と横幅

W3C（WAI）のアクセシビリティ規格「WCAG 2.1」では、1行の文字数は、1行40字（全角文字の場合）を推奨しています（W3C WAI, 2018）。

1行の文字数が多すぎると、次の行に移るときの視線移動が大きくなり、目が疲れやすくなります。

SWELLの初期設定では、コンテンツの横幅が1200pxで1行あたり全角47文字。

先ほどの目安より少し多めです。

横幅を1080pxにすると、1行の文字数がおおよそ全角40文字になります。

ただし、フォントサイズや余白の設定によっては40文字ちょうどにならないことがあるため、実際にサイトを確認しながら微調整してください。

画面ごとの読みやすい文字数の目安

よくある質問

コンテンツ幅を変更すると、サイドバーの幅も変わりますか？

変わりません。

変わるのは記事本文が表示されるエリアの幅だけです。

サイドバーを非表示にしている固定ページでは、「1カラム時の記事コンテンツの幅」の数値が使われます。

幅を変更すると、レイアウトが崩れることはありますか？

大きく変更すると、画像やブロックの余白バランスが崩れて見えることがあります。

変更後は必ずプレビューでトップページ・記事ページ・固定ページを確認しましょう。

スマホ表示にも影響しますか？

「コンテンツ幅の設定」はPC・タブレット表示向けの設定で、スマホ表示には基本的に影響しません。スマホは画面幅に応じて自動的にレイアウトされます。

何pxにすればいいか迷ったら？

明確な正解はありませんが、読みやすさを優先するなら1080px（1行40文字前後）が一つの目安です。

サイトの雰囲気やコンテンツ量に応じて900〜1200pxの範囲で調整し、変更後は実際の見え方を見ながら微調整するのがおすすめです。