Twenty Seventeen 記事とサイドバーの幅を変更する方法

テーマTwentySeventeenでは、パソコンやタブレットで閲覧した時、サイト全体は以下の横幅で表示されます。

サイドバーはともかく、記事の表示幅が狭いと感じましたので、広げることにしました。
その際のカスタマイズ方法を書いていきたいと思います。

Googleアドセンスをダブルレクタングルにしたい

記事の幅を広げる理由は他にもあります。

Googleアドセンスの広告を記事下にダブルレクタングルで表示するためです。

ダブルレクタングルとは、広告を横に並べて表示する方法です。

一般的にダブルレクタングルで広告を表示する場合、300×250の広告を２個並べるか、または336×280の広告を２個並べるか、どちらかの方法になりますが、336×280の広告は、300×250の広告も表示できるので、より有利であると言われています！

大は小を兼ねるということですね。

よって、横幅336×2=672、余白を考えると680以上の記事幅に設定したいと考えています。

これを踏まえて、カスタマイズ方法を書いていきます。

 

記事幅の変更方法

style.cssに追記します。事前に子テーマのstyle.cssを用意しておきましょう。

子テーマstyle.cssの格納場所：public_html/wp-content/themes/子テーマ

サイトの横幅は、style.cssにある以下のコードで設定されています。

 

このコードの数値を変更することで、自由にサイトの横幅を変更できます。

CSSでは後で書いたコードが優先されますので、上記コードをコピーし、style.cssの最後に貼り付けてから数値を変更すると良いです。

私は以下のように変更しました。

 

変更した箇所を解説

変更した箇所と内容は以下のとおりです。

• ６行目で余白を含めた全体の横幅を1200pxに設定しました。
• 7行目、8行目で左右の余白をそれぞれ2emに設定しました。1em＝1文字分の長さですので、TwentySeventeenの初期設定では、1em＝16pxとなります。2emだと32pxです。
• 13行目で、記事の横幅を66%に設定しました。全体の横幅1200pxから余白64pxを引いた、1136pxの66％の横幅になりますので、749.76pxになります。
  （1200px-64px）×66％=749.76px
• 19行目で、サイドバーの横幅を29％に設定しました。記事の幅と同様に、1136pxの29％の横幅になりますので、329.44pxになります。
  （1200px-64px）×29％=329.44px
• 23行目で、グローバルナビゲーションメニューの横幅1200pxに設定しました。

 

変更後のサイトの横幅

このコードを適用すると、以下の記事幅に変更されます。

とりあえず、記事の横幅が749.76pxになり、Googleアドセンスのダブルレクタングル表示ができるので、良しとします。

横幅はお好みでの設定になりますが、設定の仕方がわからない場合は参考にしてみてください。