節約ママの生活を豊かにするヒント

節約ママの暮らしを豊かにするヒント

1歳の娘を育てながらOLとして働くワーキングマザー。育児・ブログ運営・格安SIM(MVNO)・節約の話題多し。無理せず節約しながら、毎日を豊かに暮らすためのヒントを発信します。

無料版はてなブログでレスポンシブデザインの人向け!コピペでアドセンスをPCだけに表示させる方法【初心者向け解説】

アドセンスをPCだけで表示してスマホではアドセンスを非表示にする方法。主に無料版はてなブログで、レスポンシブデザインの人向けになるかと思います。基本コピペで初心者でもできました。初心者の私がちょっとつまずいたところ含めて詳しめに書いておきます。前のリンクまとめ記事を見てできた人はこの解説は不要です。

 

f:id:Sachit:20160710110640j:plain

 

もちろん自力ではなく、他の方のお知恵を借りています。(私自身はCSSやHTMLはさっぱりですので・・・)なんとかできたので詳しめに書いておきます。

 

 前回記事

なんでアドセンスを貼るときにスマホを非表示にするの?という方向けに前回の記事です。

 

sachit.hatenadiary.jp

 

 

 こちらを参考にしてます

要領がつかめず、うまくいかなかったので2つの記事を混ぜてます。

thetheorier.hatenablog.com
gssmboy.hatenablog.jp

 

 まずデザインCSSにコードを貼り付け

 私がやった手順を説明します。

 

スマホ表示の時は1つにしてみる

【はてなブログ】PC・スマホでコンテンツを切り替えてみる - もう一人のY君

 の部分にあるコードをデザイン→スパナのアイコン→デザインCSSの部分にコピペして貼り付けします。(他にもコードがある場合は一番下に貼り付ける)

 

アドセンスコードを取得

google

GoogleadsenseのサイトからアドセンスのURLを取得します。レクタングルで取得しました。

 

記事下に貼りつけるコードを作る

 今回は記事下のシェアボタンの前にアドセンスを表示させます。

 いくつかコードを貼ったり、コードをいじったりするので一旦メモ帳かWordでするのをおすすめします。

ちょっとややこしいので出来上がり図を画像で。

f:id:Sachit:20160707235919p:plain

こちらからはコピペできないようにしてます。コードはこちらの元ネタブログ様でコピペできます。

まずこちらの設置方法に書かれているコードをコピペします。(赤字部分)

 

設置方法

【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常

 次に先ほど取得したアドセンスのコードを※ここにアドセンスのコード貼り付けの部分に貼り付けします。(青枠部分)

 

そして、アドセンスの名前をちょっと書きかえます(黄枠部分)

 

そしてスマホ表示の際に消したい方のGoogle AdSenseコードの<ins>タグにあるclassを下のように書き加えます.

【はてなブログ】PC・スマホでコンテンツを切り替えてみる - もう一人のY君

 

 

記事下に貼りつけ

f:id:Sachit:20160709143649j:plain

デザイン→スパナのマーク→記事→記事下にさっき作ったコードを貼りつけます。この時も他にコード貼っていたのですが、下に貼りつけしました。

 

 実際の画面

とりあえず他のブログを拝見している限り、広告を表示させちゃうのはだめみたいなので広告部分をモザイクにしております。

 

PCの画面 。

f:id:Sachit:20160707235345p:plain

 

こちらは画面を小さくしていったところ。(スマホタブレット

 

f:id:Sachit:20160707235412p:plain

 

スマホでも確認していましたが広告は表示されていなかったので成功かと思います。

 

まとめ

f:id:Sachit:20160709143649j:plain

 

とりあえず1つだけですがPCで表示、スマホで非表示の設定にすることはできました。もともとそんなにアクセスのないブログなので、PCだけにアドセンス貼ることでどれくらい効果があるのかはわかりませんが、しばらく試してみようと思います。