【Stinger5 forLadys】個別記事の記事下広告2つを横並びにした方法
「Stinger5 for Ladys」も、ウィジェットで簡単にAdSenseを貼れちゃいます。
「Goolgeアドセンス用336px」と「Googleアドセンスのスマホ用300px」というウィジェットがあり、それぞれにレクタングル「336×280」「300×250」のAdSenseコードを貼り付ければよいのです。
PCの場合は、サイドバーに1つ、個別記事下に2つ表示されます。
スマホの場合は、サイドバー上部に1つ、サイドバー下部に1つ、個別記事下に1つ表示されます。
PCの個別記事下の2つは、縦並びに表示されます。これを横並びにしたので、その方法を紹介します。
目次
PC用のアドセンスも「300×250」に
記事エリアの横幅は609pxで、336px2つは横に並びません。なので、300×250のレクタングルを使います。
スマホ用で取得したコードを流用しても大丈夫だと思いますけど、私は別に取得しました。
このコードをウィジェット「Goolgeアドセンス用336px」に貼り付けます。
縦並びになるよう、PHPとCSSを変更
「幅が609pxに収まれば、自然に横並びになるかな~」と思ったのですけど、なりませんでした(^_^;)
で、single.phpとstyle.cssを、ちょこっとずつ変更します。
2つの広告は、それぞれがブロック要素になっていたので、これをインラインに変更します。
ブロックとブロックの間には改行が入るので、横並びにするにはインラインにする必要があるのです。
参考:ブロックレベル要素とインライン要素-HTMLの基本
display-スタイルシートリファレンス
single.phpで、スタイル指定部分を削除
個別記事ページのPHPはsingle.phpです。
single.phpの中で、スタイルを指定している箇所(下記水色の行)を削除します。
クラスsmanoneは、style.cssの中で「PC表示のとき display:block」と宣言されているので、これを呼び出さないようにするのです。
52 53 54 55 56 57 58 59 60 |
<div style="padding:20px 0px;"> <?php get_template_part('ad'); //アドセンス読み込み ?> <?php if(is_mobile()) { //スマホの場合 ?> <?php } else { //PCの場合 ?> <div class="smanone" style="padding-top:10px;"> <?php get_template_part('ad'); //アドセンス読み込み ?> </div> <?php } ?> </div> |
52 53 54 55 56 57 58 |
<div style="padding:20px 0px;"> <?php get_template_part('ad'); //アドセンス読み込み ?> <?php if(is_mobile()) { //スマホの場合 ?> <?php } else { //PCの場合 ?> <?php get_template_part('ad'); //アドセンス読み込み ?> <?php } ?> </div> |
style.cssに、inline宣言を追加
下記水色の4行を、style.cssに追加します。
PC表示のときだけに適用させるため、
「@media only screen and (min-width: 780px) {}」の中に記述します。
私が実際に記述したのは、style.cssの一番最後「/*– ここまで –*/」の前です。
1273 1274 1275 1276 1277 1278 |
/* 記事下AdSense 横並べ */ div.textwidget { display:inline; } /*-- ここまで --*/ } |
div.textwidgetを使っているところ全てに影響するので、たとえばサイドバーにテキストウィジェットを使って何か書いたとき、おかしくなるかもって思ったのですけど、今のところ大丈夫みたいです。
まとめ
アドセンスのPCでの推奨サイズは336pxで、収益が良いらしいです。だから、Stinger5のデフォルトは336pxなのだと思います。
でも、336pxの縦並びは迫力ありすぎな気がしたので、変えてみました。横並びですっきり収まったと自己満足しております(^^)
この記事へのコメントはこちら