【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」と宣言されているので、これを呼び出さないようにするのです。

style.cssに、inline宣言を追加

下記水色の4行を、style.cssに追加します。
PC表示のときだけに適用させるため、
「@media only screen and (min-width: 780px) {}」の中に記述します。
私が実際に記述したのは、style.cssの一番最後「/*– ここまで –*/」の前です。

div.textwidgetを使っているところ全てに影響するので、たとえばサイドバーにテキストウィジェットを使って何か書いたとき、おかしくなるかもって思ったのですけど、今のところ大丈夫みたいです。

まとめ

アドセンスのPCでの推奨サイズは336pxで、収益が良いらしいです。だから、Stinger5のデフォルトは336pxなのだと思います。
でも、336pxの縦並びは迫力ありすぎな気がしたので、変えてみました。横並びですっきり収まったと自己満足しております(^^)

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。