pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

はてなブログのスマホ画面で記事上部あるいは記事内にGoogleアドセンスを簡単に表示させる方法

今回は自分がスマホで記事上部にGoogleアドセンスをどうやって表示させているのか紹介したいと思います。


実際に記事上部に設置しようとすると

はてなブログで表示させることができるということと、それは毎回手で打たなければいけないということは調べるとありました。

がどうやるかが詳しくまとめてあるところがなかったのでまとめてみます。


またたしかに毎回打たなければならないのですが。。

それをより簡単にする方法を紹介したいと思います。


今回はPC(Mac)で編集することを想定しています。


jsでスマホのみにアドセンスと「スポンサードリンク」という表示をさせたいと思います。

結果から言うとこれに自分のアドセンスの設定を入れていまえばokです。



gist7001675


ここで各々変えなければいけない項目は、

google_ad_client = "ca-pub-5983151569776671";
/* top_kiji_rikei_sp */
google_ad_slot = "1477103143";
google_ad_width = 300;
google_ad_height = 250;

です。

これらはGoogleアドセンスを生成したときに、自分のが記載されているので移し替えましょう。

しかし、毎回手でこれをどこからかコピーしてペーストってけっこう面倒です。


f:id:inagex:20131016112437p:plain


なので今回はこれを使います。

やっていることは一緒なのですがcilpmenuclipmenuは手軽で無料でだれでも簡単に始められます。

実際にMacに入れて快適だったMacアプリ10選 - 理系大学生のwebメモ実際にMacに入れて快適だったMacアプリ10選 - 理系大学生のwebメモはてなブックマーク - 実際にMacに入れて快適だったMacアプリ10選 - 理系大学生のwebメモ


ここでも紹介しています。

さっそくこれをダウンロードし、スニペットとして先ほどのコードを登録しましょう。

clipmenu->環境設定->スニペットを選択します。

f:id:inagex:20131016112732p:plain


このように登録すればもう準備はできました。

f:id:inagex:20131016112942p:plain


このような感じで
gad_glayをクリックすると現在のカーソル後に挿入されます。



実際にこの記事の最初にも使ってみました。