はてなブログの記事中・見出し前に広告を設置する
おすっ！つな（@tu_na_69）です(・∀・)
Google Adscenceの広告位置を記事の見出し前に変更しました。
前回はタイトル下にレスポンシブ広告を設置していました。
タイトル下に設置している理由は、単純に設置しやすいから。
「デザイン」→「カスタマイズ」→「記事」→「記事上」にコードを入れるだけでＯＫなんです。
つなろっくではすべての広告を画面サイズに合わせた広告を自動で設置してくれるレスポンシブ広告にしています。
上から「記事のタイトル」→「広告」→「画像」の順に表示されます。
PC画面だと、タイトル下に横長の広告が表示され、それほど違和感がないのですが、モバイルの場合、広告が画像と同じくらいの大きさになり、主張しすぎて気になっていました。
そこで、広告の位置を少し下げることにします。記事の文中より、最初に出てくる見出しの前に設置します。
広告を見出し前に設置する
今回。こちらの記事を参考にさせていただきました。
はてなブログの記事中•文中に自動的にGoogleアドセンスを挿入する設定方法 - tamasaburo
コードをコピペするだけで、見出し前に広告が自動的に設置されます。
ただし、このままコピペするわけではなく、広告のコードの追加と書き換えをします。
初心者の方には、一度メモ貼り付けてから、書き換えコピペをおすすめします。
①コードをコピーして、メモ帳に貼り付ける。
画像の次の箇所を書き換えます。
②<!--ここに自分のアドセンスのコード-->にアドセンスコードを貼り付けます。
③「h2」見出しの前に広告を設置したいので、「h3」を「h2」に書き換えます。
注：ここは必要な方だけ書き換えてください。
h2見出しを使っていない場合は「h2」にすると広告が表示されません。
逆に、h2見出しを中心に使っている場合は、「h3」のままだとうまく広告が表示されないと思います。
自分のサイトの見出しタグに合わせて、必要な場合は書き換えをしてください。
④ダッシュボードより「デザイン」→「カスタマイズ」→「記事」→「記事下」に書き換えたコードをコピペします。
⑤「変更を保存する」をクリックして、サイトを確認します。
うまく表示されない場合
うまく広告が表示されない場合は、もう一度見出しを見直してみてください。
①記事内の見出しをチェックする
見出しタグの前に広告が表示されるコードなので、記事内に見出しタグがなければ、広告は表示されません。
必ず記事の中に見出しをつけてください。
②コードの見出しを書き換える
「HTML編集」で見出しのタグを確認して、自分が使っている見出しタグに合わせてコードの「h3」「h2」を書き換えてくださいね。
はてなブログの見出しについては、こちらの記事でもまとめています。参考にしてみてください。
