*

大好きなガジェット、ゲーム、写真、映画、ブログ運営などの情報をお届けする、くねおのライフログブログ

AdSense広告をダブルレクタングルにするために記事エリアの幅を広げてみた

      2015/10/09

AdSense始めて10日以上経過して、
ぐへへ、どんくらい稼げたのかな、ぐへへ。
確認した。




誰もクリックしてねえええええええええええええええええええええええ。
600ページ以上見てもらえてるのにクリックゼロ。
半分スパムだけど。

踏め、誰か踏めYOOOOOOOOOOOOOOOOO!!!!!!!(心の声)

いいんですけどね(笑)

そろそろサイトのカスタマイズはやめて、
記事だけ書けばいい状態にしたい。

そういや、AdSenseって1ページに3つ貼れるんだと思い
もう決めてしまえと配置を考えた。

STINGER5のウィジェットで設定出来るデフォルト配置

20150719_row_size_customaize01
おいらがやりたい配置

20150719_row_size_customaize02

こうするためには記事下に2つ配置できるように記事エリアの横幅を広げないといけない。
重い腰を上げて作業を開始した。

 

 

オリジナルのstyle.cssを使用するようにした

今まで子テーマに空のstyle.cssをぶち込んで、変更したいセレクタだけを書きこんでカスタマイズしていた。
だって楽ちんなんだもん。
今回のカスタマイズを機に、STINGER5内にあるstyle.cssを子テーマにまるまるコピーして改造していくことにした。

 

 

style.cssの修正ポイント

今回横幅300pxのAdSenseを2つ横並びに表示させたいので、
記事エリアの横幅を600px以上確保したい。
スタイルシートを見るとサイドバーが300pxに固定されているので、
サイト全体の幅を広げたら、自動的に記事エリアが広くなる事がわかった。
なので、以下のコードを挿入。

挿入箇所はbodyセレクタの直後

そして以下をコメントアウツ!

OK!サイト幅が広がり、自動的に記事エリアの幅も広がった。

 

 

single.phpにAdSenseを挿入する

次にWordPressのダッシュボードからウィジェットの設定で、
今貼っている全てのAdSenseを削除した。

そしてsingle.phpにコードを書いて、貼りたい箇所にAdSenseを貼っていく。

記事タイトル下(スマホ)

記事タイトル下の箇所に以下のコードを挿入。

 

 

記事下にPC2つ、スマホ1つ

記事本文直後に以下のコードを挿入。

 

 

ヘッダー画像の差し替え

無事PCでAdSenseが2つ並んで表示された。
ひとしきり悦に浸って、ホームに戻ったところで異変に気付いた。

あっ。

20150719_row_size_customaize03

サイト幅変えたからヘッダーの横幅が足りなくなっとる・・・・
ちゅうー事で、ヘッダーをちゃちゃっと横幅1030pxに対応させる。

ドヤッ!

20150719_row_size_customaize04

おわり。

あ、見出し前に入れるの忘れてる。
ま、いっか。

 - ブログ運営 , , , ,

スポンサーリンク


1番上へ