スポンサーリンク







ブログ運営

WING(AFFINGER5)でアドセンスを2カラムで表示する方法

投稿日:

こんにちは!きょうたです。

このサラリーマン脱出計画はワードプレスを使っていて、テーマはWIGという有料テーマを使っています。

以前はSTORKを使っていたのですが、あまりにSTORKを使っているブロガーさんが多くて変えたくなって購入したわけです。

 

しかしWINGにして困ったことが発生しました、それがgoogleアドセンス広告を記事下に2カラムにするやり方がわからない問題です。

けっこうググったんですけど全然出てこなかったんですよね、だったら自分で見つけちゃお~って思って記事にしました。

それではご紹介します。

WING(AFFINGER5)のウィジェットを開く

まずは左上にマウスを合わせてからウィジェットを選択してください。

ウィジェットの投稿記事の上に一括表示を選ぶ

ウィジェット編集画面をひらいたら投稿記事の上に一括表示を選ぶを選んで左からテキストをドラッグ&ドロップで持ってきてください。

テキストの中身を編集して2カラムにする

いよいよテキストの中身を編集して2カラムにしていきます。

編集するのはビジュアルタブではなく、テキストタブで行いますので間違えないようにしてください。

僕は自分でタグを増やしているのでごちゃごちゃしてますが気にしないでください。

下にスクロールすると下の図PCとTab50%というボタンがあるので押してください。

するとしたにショートコードが現れます。

まずはの<p></p>の間にある左側のコンテンツ50%にアドセンス広告のコードを貼り付けてください。

次に同じくの<p></p>の間にある右側のコンテンツ50%にアドセンス広告のコードを貼り付けてください。これで完成です。

以下の写真の黒い部分のように広告が横ならびに表示されていれば成功です。

※必ずスマホの設定をしてください。

実は最後に必ずややらなければならないことが一つだけあります。

実はこのままだとスマホで見た時にアドセンス広告が縦に二つならんでしまいます。

これはgoogleの規約違反になってしまいペナルティになってしまうので必ず改善しなくてはいけません。

 

改善方法はとても簡単なので解説します。

右側のコンテンツ50%にアドセンス広告を貼り付けた後に、上の青色で選択してある部分、<div class="rbox">から</div>を選択し、上の選択ボタンの中にあるPCに表示しないボックスを選択してください。

これでPCでアドセンス広告を2カラムで表示することができて、スマホでは広告を一つだけ表示することができます。

 

まとめ

今回はこのブログでも使っているワードプレステーマ、WING(AFFINGER5)を使ってアドセンス広告を2カラムにする方法をご紹介しました。

WING(AFFINGER5)で悩んでいる人はぜひ参考にしてみてください。

スポンサーリンク







-ブログ運営

Copyright© サラリーマン脱出計画 , 2018 All Rights Reserved Powered by AFFINGER5.