Adsense広告を記事の中に挿し込む方法

f:id:rankasan:20170313224144j:plain

記事中に広告を表示しているブログをよく見かけるようになりました。自前のWordpressなり、Movabletypeなり、使っていれば出来そうですが、無料ブログとなるとそうは行きません。かと言って、いちいち記事中に広告を貼り付けるのは面倒ですし、警告受けて広告を外すとなると、全記事を洗わなければならなくなります。そこでjQueryで広告を挿し込む方法を考えました

サンプルソース

最初に現れる<h3>タグの前にAdsense広告を挿入するスクリプトです。<div id="ad">の中にAdsense広告表示用のスクリプトを書いておきます

最初の<h3>タグの前に<div id="ad">を移動しているだけですね。セレクタ部分を変更すれば、好きなところに<div>を移動できます。$(document).readyは複数回呼ばれても問題ないので、共通の記事下やフッタに記述しておくと良いでしょう

はてなブログでの利用例

はてなブログでの利用手順を書いておきます。他のブログでも似たような手順で利用可能ですので、参考になれば幸いです

jQueryをインポートする

  1. ブログ管理画面の設定を選択
  2. タブで詳細設定を選択
  3. headに要素を追加の項目に以下のコードを追記します

以下の様に記載します。これで全ての記事にてjQueryが利用出来るようになります。

f:id:rankasan:20170313085237p:plain

 Adsense挿入スクリプトを設定する

  1. ブログ管理画面のデザインを選択
  2. タブのカスタマイズを選択
  3. カスタマイズの記事を選択
  4. 記事下に前述のAdsense広告を挿入するスクリプトを記述する

 以下の様に記載します。これで完了です

f:id:rankasan:20170313090849p:plain

Adsense挿入先変更例

前述のスクリプトの2~4行目を変更することでAdsense広告の挿入位置を変更できます。変更例を以下に示します

jQueryを使えると無料ブログでも様々な事が出来るようになります。難しくはないのでチョット勉強してみてもいいかも

10日でおぼえるjQuery入門教室 第2版

10日でおぼえるjQuery入門教室 第2版

 

アクティブビュー視認可能率を下げずに広告を挿し込む方法の記事を書きました。合わせてご覧下さい

プライバシーポリシー