2017年02月07日WordPressアドセンス賢威アドセンスの配置について悩んでいましたが、多くのニュースメディアでレクタングル大を記事下に横並び表示させています。様々なテストを行った結果、収益見込みが高いのでダブルレクタングルにしているのだと思います。そこでこのブログでも記事下にアドセンスを横並び表示させることにしました。賢威8にテーマを変更したので、「フレックスボックス」でアドセンスを横並び表示させるコードに変更しました。新しいコードの方がコードも単純で、記事幅が変わっても表示が崩れないと思います。アドセンスのレクタングル横並び表示でやりたいことそこで、PCでは記事下にレクタングル大を2つ横並び表示。このままだとスマホで画面上に2つの広告が表示され規約違反になります。※広告の配置に関するポリシーが変更され、現在はスマホ画面に2つ以上アドセンス広告が表示されても規約違反ではなくなりました。そこでPCとスマホの表示を切り替え、スマホではレクタングル大ではなく、モバイル推奨とされているレクタングル(300×250)を1つ表示させたいと思います。コードを追加する位置アドセンスを配置する場所は投稿ページの記事下、ソーシャルボタンの上が個人的には理想的。投稿ページはどのテーマでもだいたいsingle.phpだと思います。?>このコードの上に追加します。single.phpに追加するコードわたぼんさんの「WordPressでアドセンス広告を横並びに設置する方法と注意するべきポイント」に書かれているコードを使わせてもらいました。?>の上に追加すると、ソーシャルボタンの上に表示されます。class="sm-ad-bottom">スマホ用アドセンスコードを見ると、モバイルの場合に表示するコード。?>それ以外(モバイル以外)の場合に表示するコードと、条件分岐タグを使用してスマホとPCの表示が切り替わるようになっています。このコードだけでは縦にレクタングル大が2つ表示されるだけなので、スタイルシートで表示を整える必要があります。スタイルシートに追加するコードstyle.css(賢威7ではbase.css)に以下のコードを追加します。{content:"";display:block;clear:both;}これでPCではレクタングル大が横並び表示され、スマホではレクタングルが1つ記事下に表示されるようになります。上下の間隔を広げたい場合、margin-topとmargin-bottomの数値を変えれば広告とソーシャルボタンや記事本文との間隔を変えられます。参考にしたソースコードだと表示される広告の位置が指定されていないので、スマホでも中央表示されるようにコードを付けたしました。PCでも中央に寄せよう思いましたが、つまずいたことがあるので当分はこの間までにしておこうと思います。PC表示での問題点1カラムのみ、あるいは2カラムのみを使用するなら問題はないです。通常は2カラムを使用し、特定の記事だけ1カラムの記事にしたい場合に問題が生じます。表示を中央に寄せたい場合、.ad-bottom-leftにmargin-leftを記述すれば調節できます。1カラムと2カラムでは記事幅が異なるので、margin-leftでは同時に指定できません。スマホ表示ではtext-align:center;をCSSに追加してアドセンスを中央寄せできましたが、PCではfloatを使用しているためなのか中央に寄せることができませんでした。auto;でも上手くいきません。1カラムを使用することは多分ないと思いますが、もはや手に負えません(笑)。異なるカラム数のページがなければ問題はないので、しばらくはこのままでいようと思います。今回はレクタングルの横並び表示について書きましたが、賢威7にインフィード広告を表示させる方法も書いています。今日のたつじんへの一歩たつじんwCSSについてもっと勉強しないと、カスタマイズするのも大変どころかできません(笑)スポンサーリンクこの記事を書いている人たつじんwたつじんwになるために勉強したことをこのブログに書いています。最近はWordPressとiPhoneの記事が多いです。必須サイト上に表示された文字を入力してください。TOPWordPress記事下にアドセンスを横並び表示してスマホと表示を切り替える【賢威7】プロフィールWordPressとiPhoneが好きな標準的ではない男子(おっさん笑)です。たつじんwプロジェクトシェアお問合わせTOPへホーム。