メンヘラ主婦がアフィリエイトで1万円稼げるか

めんしゅふ

アドセンス AFFINGER

AFFINGERの横並びアドセンスとスマホ広告にラベルを入れる

投稿日:2017年4月25日 更新日:

こんにちは。めんしゅふちあき(@chiakinako47)です♪

AFFINGER!最初は全然慣れなかったんですけど、使っていくうちにどんどん良さが分かってきました。これは多少cssがいじれないと厳しいな~と思いながら日々カスタマイズをしております。

AFFINGERでは、PCから見たときのアドセンス横並び(ダブルレクタングル)に対応しています。

参考AFFINGER4でPC閲覧時にアドセンスを横並びにする方法 - アフィリエイトのAFFINGER

この方法でやると、ちゃんとアドセンスが横並びになるのですが、「スポンサーリンク」が表示されません。良く勘違いされるのですが念のため言っておくと表示の義務はありません。紛らわしいところに置くときは表示するように・「スポンサーリンク」か「広告」の2種類しか使っちゃダメ!という決まりはあります。

ですが!!!

やっぱりなんとなく不安だからスポンサーリンクってつけたい…
でもウィジェットでつけようとすると、広告1つずつに「スポンサーリンク」ってついちゃって何となくかっこ悪い…
そう思って私はほとんど知識が無いんですが色々検索してたどり着きました。

横並びダブルレクタングルとスマホの記事下アドセンス同時に「スポンサーリンク」と1つだけセンターに表示させる方法が分かりました。

ちなみにこちらの【STINGER PLUS】記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法-kanamiiさんという神サイトさん

を参考にさせていただきました。ありがとうございます…!!

スポンサーリンク

まずはじめに用意すること

親テーマの「single.php」と「single-type1.php」をFTPソフトなどでコピーして「affinger4-child」フォルダに格納しておきます。これで俗にいう「子テーマ」の完成です。切り取りではなくコピーである点に注意してください。切り取っちゃったらおそらく大変なことになります。

~2017.5.26追記~
動作確認をしているのはver.20170410になります。

参考AFFINGER4でPC閲覧時にアドセンスを横並びにする方法 - アフィリエイトのAFFINGERこちらの説明通りに、PCの閲覧時の横幅を1114px以上に広げておき、ウィジェットの「広告・Googleアドセンス用336px」、「広告・アドセンスのスマホ用」をそれぞれ「テキスト」で設定しておいてください。参考URLにはstyle.cssの記述がありますがアップデート済みのため不要です。ここで注意なのがPC用広告は336×280、スマホ用は300×250(レスポンシブはNG)を厳守してください。そうしないと表示が崩れてしまいました。

single.phpの編集

子テーマの中のsingle.phpを編集します。

<TEMPLATEPATH>という記述を<STYLESHEETPATH>に変えてください。

include(STYLESHEETPATH . '/single-type2.php');
include(STYLESHEETPATH . '/single-type1.php');

single-type1.phpの編集

<?php get_template_part( 'st-ad-on' ); //広告 ?>と検索して色が反転するところの真上に以下のコードを挿入します。

*追記*下記タグの「<div align="center">」の2つ目の「"」が編集中に抜けたまましばらく公開してしまっていました。まことに申し訳ありません。

*2017年5月追記* 2つ目の「/div」が改行すると上手く認識されないことがあるようなので、改行しないコードに変更しました。もし上手く行かない場合は改行したり色々試してみたりしてください。

 

「スポンサーリンク」か「広告」かはお好みで選んでください。

style.cssの編集

*2017.05追記*ラベルとアドセンスの間に余白ができてしまうようなので「.adbox」コードを追記しました。

style.cssの子テーマを編集します。一番下に以下の記述をします。「margin-bottom: 0」は「スポンサーリンク」とアドセンスとの間の幅、「font-size:80%」は「スポンサーリンク」の文字サイズを表しています。「15px」とか指定してもいいですが、私は80%に指定しています。

 

キャッシュクリア後更新して反映

キャッシュクリア後更新するとPCとモバイルで以下のようにきちんとラベルが反映されていると思います~

キャッシュクリアは、Chromeの場合はF12キー→更新の矢印マークの上で右クリック→「キャッシュの消去とハード再読み込み」で出来ます。

【PC表示】

【スマホ表示】

カスタマイズ前はバックアップを取ってくださいね。

それではまた!

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

-アドセンス, AFFINGER

Copyright© めんしゅふ , 2017 All Rights Reserved.