【Lightning】コンテンツ幅を変更する方法！無料版はCSS、Proなら設定だけでOK

まめすけ

PCでブログを見てたんだけど、文字が画面の端から端まで長〜くなってて、目で追うのが大変だワン…。 これじゃあ読むのが疲れちゃうよ。

確かに、モニターサイズによってはデフォルトのままだと横に広がりすぎて読みづらいことがあるね。 これは「コンテンツ幅（コンテナ幅）」を調整すればすぐに解決するよ！

WordPressテーマ「Lightning」を使っていると、「メインコンテンツの幅をもう少し狭くしたい」「全体をスッキリ見せたい」と思うことがあります。

実はこの設定、「無料版」か「Pro版（有料）」かによってやり方が異なります。

この記事では、多くの人が使っている無料版でのCSS調整方法を中心に、それぞれのやり方を解説します。

【無料版】CSSを使ってコンテンツ幅を調整する方法

無料版のLightningを使っている場合は、CSS（スタイルシート）を使って幅を指定します。 「CSSなんて書けないよ！」という人でも大丈夫。コピペするだけで完了します。

まめすけ

英語がいっぱいで怖いワン…。 サイトが壊れたりしないかな？

大丈夫！「追加CSS」という安全な場所にコピペするだけだから簡単だよ。 でも念のため、変更する前にはバックアップを取っておくと安心だね。

手順：追加CSSにコードを貼る

/* サイト全体のコンテンツ幅を1000pxにする */
.site-body-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

【Pro版】カスタマイズ画面から設定する方法

もしあなたが有料のプラグイン「Lightning G3 Pro Unit」を入れているなら、CSSは不要です。 もっと簡単に設定画面から変更できます。

まめすけ

有料テーマのメリットだね！どこから設定するの？

手順は以下の通りだよ。

Pro版ユーザーの方は、ここを変えるだけでサイト全体の幅が一瞬で切り替わります。

読みやすいコンテンツ幅の黄金比は？

変更方法はわかりましたが、「結局、何pxにするのが一番読みやすいの？」と迷うかもしれません。

一般的には、以下のサイズが読みやすいと言われています。

• 1カラム（サイドバーなし）の場合： 800px 〜 1000px 文章メインの記事（LPやコラムなど）は、これくらい狭いほうが目が疲れず、最後まで読まれやすくなります。
• 2カラム（サイドバーあり）の場合： 1000px 〜 1200px メイン記事部分とサイドバーを合わせてこのくらいの幅が主流です。

まめすけ

なるほど〜。広ければいいってわけじゃないんだね。 「広すぎず狭すぎず」が大事だワン！

コンテンツ幅変更前

コンテンツ幅変更後

このように、たった数行のコードを追加するだけで、読みやすくなるからぜひ試してね！

まとめ：無料版でも幅調整は簡単！

今回はLightningのコンテンツ幅を変更する方法を紹介しました。

• 無料版の人： 追加CSSに .site-body-container のコードをコピペする。
• Pro版の人： 「レイアウト設定」から数字を入れるだけ。

多くの人は無料版で運用していると思いますので、今回紹介したCSSの方法をぜひ試してみてください。

まめすけ

幅を調整したら、ご主人のブログがすっごく読みやすくなったワン！ これなら長文の記事でも、最後まで読んでもらえそうだね！

読みやすさは「直帰率」や「滞在時間」にも影響する大事なポイントだからね。 ぜひ自分のサイトに合った幅を見つけてくださいね！