WordPress無料テーマ「AFFINGER（アフィンガー）」のカスタマイズ♪
以前の記事「AFFINGER（Ver.20151021）でトップの記事一覧に広告を入れる方法」および「AFFINGER２でトップ記事一覧に広告を入れる方法♪」にてブログのトップ記事一覧の中、記事と記事の間に広告を挿入する方法をご紹介しておりました♪
元はSTINGER5の方法を参考としております♪
でして、元々トップ記事一覧に広告を挿入する方法としてはスティンガー５の作業を参考としております。というかほぼそのままです（笑）
その際、挿入する広告はAdSenseの「レスポンシブ」を推奨しておりましたが、今回はA８netなどのサイズ固定タイプを挿入し、中揃えする方法をご紹介します♪
前述の記事の通りに作業することで挿入は可能ですが、そのままでは左寄りになってしまいます
広告のサイズは320×50です
そのままだと、上の画像のようにバランス的に芳しくない感じになってしまいます・・・
従って、これを中揃えにしてみましょう♪
広告の位置を中揃え（中央寄せ・センタリング）する方法
作業は超簡単です♪
先ずは以前の記事「AFFINGER２でトップ記事一覧に広告を入れる方法♪」の通り、広告を挿入して頂くと先の画像のように広告が左寄せで設置されます。
ここで「テーマの編集」の「itiran-thumbnail-on.php」（AFFINGER２の場合）に少しだけコマンドを追加します（AFFINGERの場合は「itiran.php」を編集）
<?php if ( $loop_count == 3 || $loop_count == 7 ) : ?>
<div class=”toppagead”>
<p style=”color:#666;margin-bottom:4px;text-align:center;”>スポンサーリンク</p>
<div align=”center”>挿入する広告のコード</div>
</div>
<?php endif; ?>
赤で表示したように、挿入する広告コードの前後へ上記のコマンドを入れて下さい
すると、上のように広告が中揃えになります♪
以前の記事「パソコン画面で超簡単にスマホ表示を確認する方法♪」でご紹介したデベロッパーツールを利用してPC画面上でスマホ表示（イメージ）を確認すると、このように表示されます♪広告サイズ320×50だとピッタリですね♪
尚、この記事でご説明した以外に他のテンプレートも修正する必要がありますので、最初に出てきた以前の記事「AFFINGER（Ver.20151021）でトップの記事一覧に広告を入れる方法」および「AFFINGER２でトップ記事一覧に広告を入れる方法♪」もご確認下さい♪
このブログは本来、この位置にAdSenseのレスポンシブ広告を貼っているのですが諸事情あり、現状は暫定的な運用を余儀なくされているところです・・・
AdSenseのアカウントを取ってない方や失ってしまった方は、よろしければこの方法をご活用下さい♪
追記）テーマを編集される際はくれぐれもバックアップをお忘れなく！
コメント