ebay輸出のことや、Amazonプライムビデオのおすすめ作品などをヨッタさんへ教えるブログ

前略、ヨッタさんへ

AFFINGERの記事エリア幅を変更する色々なパターンをまとめました

このページは に更新されました。

article-width-change

AFFINGER4の記事エリア幅を変更する方法について、パターン別で5つご紹介します。

記事エリアを変更するだけでサイトの見た目って一気に変わるんですよ!

こんな選択肢もあるんだってご参考まで

記事エリア幅って?

文章の入っている部分が記事エリア幅です。

素のAFFINGERに子テーマだけを入れた状態、つまりは通常のAFFINGER4は記事エリア幅が640pxとなります。

文章が入っている部分はココ (article)article-640px

文章の両隣には50pxずつの余白が設定されています。

よって記事部分は全部で740pxあります。(640+50x2)

これは1060pxの通常サイト幅に対して、サイドバーの300pxと余白20pxを引いた値です。

1060-site-for740

この記事は、「文章が入っている所(640pxの部分)」を変更しようじゃないか!という内容

記事幅を変更するパターンまとめ

1:AFFINGER4管理から変更する

AFFINGER4に備わっている標準機能で変更する方法です

affinger-width-1060

AFFINGER4管理 ⇒ サイト全体の設定

最小960pxで設定できます。

参考例

960pxでサイト全体を設定した場合

site-960

記事エリア幅は540pxになります。

例えば、336サイズのアドセンスを横並びにする場合は、ここの値を1114に設定する。※記事に枠線を付けない場合は1112でもOK!

1114pxサイト幅だと記事エリア幅が694px1114

その他のパターンへ(▲)

2:カスタマイズから変更する

こちらもAFFINGER4に備わっている機能の一つ

640to700

外観 ⇒
カスタマイズ ⇒
基本エリア設定 ⇒
記事エリア背景色

PC時の記事エリアの幅を広げる(640→700px)

チェックすると記事エリア幅が700pxに広がります。

具体的には、
文章の両端に設定されていた50pxずつの余白が20pxずつに減る。

700px

メモ

記事幅が700pxなので、1060サイト幅のままでアドセンスが横並びにる(※アドセンス横並びに最低限必要な値は692px)

yotta
幅を広げるなら標準設定で対応できますね 🙂

AFFINGERの標準設定で変更できる範囲は以上です。

つづいて、幅を狭くする設定です。

その他のパターンへ(▲)

3:記事エリア幅を狭くするCSS(1)

子テーマにCSS入力して変更できます。

文章が入るところを狭くするCSSパターン1

キャッシュクリアでも効かない場合は、セミコロンの前に!importantを付けるとOKです。

文章両隣にある50pxの余白に対し、さらに40pxずつ余白追加してます。

したがって記事エリア幅は560pxとなります。かなりスッキリしました。

main30-90-30

注意点があります。

トップページ記事一覧の部分はもちろんのこと、記事タイトルやアイキャッチなども一緒に狭まります。

これを回避するのが次の方法です

4:記事エリア幅を狭くするCSS(2)

子テーマにCSS入力して変更できます。

記事エリアのさらに文章エリア幅のみが560pxとなります。

only-mainbox

タイトルなどは640px, 文章幅だけ560px

タイトルやアイキャッチは含まれないため、メリハリのあるタイプ

その他のパターンへ(▲)

5:AFFINGERのサイドバーを広くする変更

サイドバーを広くすると、記事エリア幅も狭くなります。

子テーマにCSS入力するとサイドバー幅を変更できます。

元々320pxだったサイドの枠を400pxにしてみました。

サイドの広がりに押し出される形で、これもまた記事エリア幅は560pxになります。

余白ふくむサイドが400px, サイドバーは380px

サイドバーと記事との間に20pxの余白がありますので、サイドバー自体は380pxサイズです。

その他のパターンへ(▲)

まとめ

思いつく限りで5つのパターンを紹介してみました。

同じ560pxという記事エリア幅でも、余白の使い方一つで大きく雰囲気や見た目が異なるのがお分かりいただけると思います。

参考までに当サイトの文章が書かれている幅は現在580pxです(PC観覧時)

haba-line

AFFINGERのデフォは640pxですから、60px幅を狭めています。

ちなみに情報ですが、AFFINGERの作者であるENJIさんのサイトの文章幅は548pxでした。

この記事のカスタマイズ環境

  • カスタマイズなしAFFINGER4 (Version: 20171227β)
  • ワードプレス(バージョン 4.9.1–ja)

-Affinger4

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.