WordPressで記事の横幅を広げる方法(初心者向け)

WordPressで記事の横幅を広げる方法(初心者向け)

こんにちは。

はけです。

ブログを書き始めて7か月が経ちました。

ブログを書いていると、次のような悩みにぶつかった人もいるのではないでしょうか。

• WordPressでテーマを設定したけど、PCで見るときはもう少し横に伸ばしたい！
• 特定のページだけ横長に表示したい！

パソコンで見るとどうしても細長く見えてしまいますよね。

私も特定のページだけ横長にできるともっと見やすく利用できるのに！と思い調べたところ、横幅を広げることができました！！

そこで今回は、私が実際に実現したWordPressでの記事部分の横幅の広げ方をこの記事で解説していきます。

簡単にまとめていますのでぜひ参考にしてください！

環境

以下の環境で実施しました。

• WordPress 5.4.2
• テーマ：Emanon Free 1.5.0
• ブラウザ：GoogleChrome

本記事の目標

念のため、目標を確認しておきます。

目標は「WordPressで作成されたブログの記事部分の横幅を広げること」です。

以下の画像のようになります。

WordPressでの記事の横幅の広げ方

ではさっそく解説していきます。

WordPressで記事の横幅を広げるためには以下の２STEPが必要です。

• 横幅を広げるためのクラスを調べる
• クラスに横幅を指定する

それぞれ解説していきます。

横幅を広げるためのクラスを調べる

まずは横幅を広げるためのクラスを調べます。

記事部分を右クリックで「検証」

記事部分を右クリックし、「検証」を押してください。

画像のように、開発者ツール内の「Elements」タブが開かれます。

ここではホームページのHTMLを見ることができます。※これはGoogleChromeで実施した場合の画像になります

他のブラウザ（FireFoxなど）を使用した場合、見た目やタブの名称などは変わりますが、同じような機能はありますので、調べてやってみて下さい。

ここではGoogleChromeでの解説とします。

「container」要素を選択する。（テーマによって異なる可能性あり）

開発ツール上で「container」を選択してください。

すると、画像のように記事の部分が青くなり、記事の外側の部分がオレンジ色になります。この「cotainer」が記事の横幅と同じであることがわかります。

さらに、右側にある「container」のCSSを見てください。

「@media screen…」の記載があり、ブラウザの横幅に合わせて「container」の横幅が変わるように書かれています。

画像では、「ブラウザの横幅が1200px以上であれば1120pxにする。」というCSSが有効になっていることがわかります。

これが横幅を指定している箇所です！！このCSSを見つければ、あとは次のSTEPの横幅指定で横幅を調整してやることができます。

※なお、私の環境ではWordpressのテーマにEmanonFreeを使用していますが、他のテーマを使用している方は別のクラスを探さないといけない可能性があります。

その際も同じように「@media screen…」で横幅を指定している箇所を探すのが近道だと思います。

クラスに横幅(CSS)を指定する

では、先程みつけたクラスに横幅を指定していきましょう。

実際に私が指定したCSSは以下です。

@media screen and (min-width: 1400px){
    .container {
        width: 1320px;
    }	
}
@media screen and (min-width: 1600px){
    .container {
        width: 1500px;
    }	
}
@media screen and (min-width: 1800px){
    .container {
        width: 1680px;
    }
}

もともとのCSSでは「ブラウザの横幅が1200px以上であれば1120pxにする。」という指定が最大でしたが、さらに大きいブラウザの横幅を想定し、以下の指定を加えました。

• ブラウザの横幅が1400px以上であれば1320pxにする。
• ブラウザの横幅が1600px以上であれば1500pxにする。
• ブラウザの横幅が1800px以上であれば1600pxにする。

このように書くことで、画面の大きさに合わせた記事の横幅を指定することができます。

私の場合、ツールを表示するページだけ横長に表示したかったので上記設定にしましたが、横幅の大きさは用途によって適宜変更して下さい。

実際に横幅を変更したページは次のページです。参考にしてください。

適切な記事幅とは？

少し脱線しますが、記事部分の横幅ってどれくらいの幅が適切なの？と疑問に思った方も多いと思いますので、その部分も解説しておきます。

ちなみに、記事幅はさきほどの「container」から自己紹介などの右側ウィジェット部分を除いた幅です。

先ほどは「container」を大きくすることで（ウィジェット部分の横幅は固定で変わらないから）記事幅が大きくなっていました。

結論ですが、記事幅は600～700pxが読みやすい幅とされています。

そのため、一般的なテーマを使用している場合、大きくても記事幅は700px程度になっていることがほとんどです。

そのため、記事幅は基本的には変える必要がありません。

特定のページだけ横長に表示するなど、使用タイミングを絞った運用がよいでしょう。

記事の横幅を広げると画像も大きくなる

ここでお気づきになったかもしれません。

記事の横幅を広げると記事の先頭に表示していた画像も縦横に大きくなってしまいます。

これでは画像だけが表示されるような状態になってしまいます。

そこで、画像の大きさの調整方法も解説しておきます。

以下の２パターンの調整方法があります。

• 画像を消す
• 画像の最大横幅を指定する

ホームページの見ばえや用途によって適宜使い分けてください。

画像を消す

画像を表示する必要が特段なければ、消してしまうのも一手です。

消す方法は次の２STEPです。

画像のクラスを調べる

まずは、記事の部分と同じように画像のクラスを調べます。

画像上で右クリック→「検証」を押してください。

画像のように、「.article-thumbnail img」の横幅が100%で指定されていることがわかります。

画像を表示しない（CSS）設定を行う

先ほど調べた「.article-thumbnail img」にCSSを指定していきます。

表示を行わない設定は「diplay:none」で、指定することで画像が表示されなくなります。

.article-thumbnail img{
　　    display: none;
　　}

このようにして画像を消すことが出来ます。

「いや、画像だけは今までの大きさで表示したい！」という方のために、次は一定の大きさまでしか画像を大きくしない設定を紹介します。

画像を一定の大きさで固定する

ここでは、画像だけ一定の大きさから大きくならないように設定する方法を解説します。

画像のクラスを調べる

先ほどの調べ方と同じです。

ここでは少し複雑なクラスを適用する必要があり、「.article-thumbnail img」「.article-thumbnail」に対してCSSを定義します。

画像を一定の大きさで固定する（CSS）設定を行う

適用するCSSは以下になります。

.article-thumbnail img{
　　    max-width: 700px;
　　}
.article-thumbnail{
　　    text-align: center;
　　}

コードは、以下を指定しました。

• 「.article-thumbnail img」に対して最大横幅を700pxにする。（700px以上大きくならない設定）
• 「.article-thumbnail」に対して画像の表示位置を中央寄りにする。（これを指定しないと左寄せの表示になる）

実際に指定すると次のようになります。

このように大きすぎないサイズの指定ができます。

以上、Wordpressでの記事部分の横幅の広げ方でした。

まとめ

WordPressでの記事部分の横幅の広げ方を解説しました。

単純に記事部分の横幅を広げる場合は、「container」に対して横幅を指定することで横幅を広げられます。

その際に、ブラウザの横幅に合わせた記事の横幅の指定方法を紹介しました。

さらに、横幅を大きくすると画像も同じように大きくなってしまうので、画像の横幅の調整方法も併せて紹介しました。

もし、みなさんも横幅を広げたいと思ったときは、参考にしてくださいね。