【超簡単】WordPressテーマ「Lightning」でメインコンテンツの幅を変える方法

2024年3月5日2025年9月15日

「せっかくWordPressでWebサイトを作ったのに、なんだかデザインがしっくりこない…」

そんなお悩みはありませんか？

特に、WordPressの定番テーマ「Lightning」を使っている方で、「メインコンテンツの幅を変えたい」「もっと見やすくしたい」と感じている方も多いのではないでしょうか。

この記事では、専門的な知識がなくても、たった数行のコードをコピー＆ペーストするだけで、Lightningテーマのメインコンテンツの幅を自由に変更する方法を、画像つきで分かりやすく解説します。

この記事を読み終える頃には、あなたのサイトがもっと見やすく、もっと洗練されたデザインに生まれ変わりますよ！ぜひ最後まで読んでみてくださいね。

WordPressテーマ「Lightning」のメインコンテンツ幅を変える方法

WordPressテーマ「Lightning」でメインコンテンツの幅を変更するには、「CSS」というスタイルシートのコードを編集します。

CSSと聞くと難しく感じるかもしれませんが、ご安心ください。これからご紹介するコードを、あなたのサイトに貼り付けるだけで、簡単に変更することができます。

まず結論：たった3ステップで完了！

WordPressのカスタマイザーを開く
「追加CSS」の項目にコードを貼り付ける
公開ボタンを押して保存する

これだけでOKです！それでは、具体的な手順を詳しく見ていきましょう。

STEP

カスタマイザーを開く

WordPressのダッシュボード（管理画面）から、左メニューにある**「外観」をクリックし、「カスタマイズ」**を選択します。

すると、サイトのデザインをプレビューしながら変更できる「カスタマイザー」画面が開きます。

STEP

追加CSSにコードを貼り付ける

カスタマイザーの左側メニューの下の方にある**「追加CSS」**をクリックします。

クリックすると、CSSを書き込むための入力欄が表示されます。この入力欄に、これからご紹介するコードをコピー＆ペーストしてください。

STEP

コードを貼り付ける

Lightningテーマの「メインコンテンツの幅」を変更するためのコードは、以下の通りです。

/* メインコンテンツの幅を960pxに設定 */
.main-content {
    max-width: 960px;
}

このコードを「追加CSS」の入力欄に貼り付けます。

すると、プレビュー画面でサイトの幅がすぐに変わるのが確認できます。

960pxの部分の数字を変えることで、好きな幅に調整することができます。

・広げたい場合：1024pxや1200pxなど、数字を大きくします。
・狭くしたい場合：800pxや768pxなど、数字を小さくします。

色々と数字を試して、あなたのサイトにぴったりの幅を見つけてみてくださいね。

STEP

公開して保存する

幅の調整が終わったら、画面上部にある**「公開」ボタン**をクリックして変更を保存します。

これで、あなたのサイトのメインコンテンツの幅が、変更したサイズに変わりました！

もっと詳しく！「max-width」って何？

先ほどのコードに出てきたmax-widthは、「最大の幅」という意味です。

このコードを使うことで、画面の幅が狭いスマホなどで見たときには、画面サイズに合わせて自動的に幅を調整してくれます。

つまり、パソコンで見る時と、スマホで見る時の両方で、デザインが崩れることなく、見やすいレイアウトを保つことができるのです。