Maison_de_chatのブログ

【実体験レポート】ChatGPTで始める副業 – 最先端AI活用で在宅収益化に挑む新たな働き方を更新中！

【中編】はてなブログで手動広告を貼る方法｜HTML編集でコピペ設置ガイド

お問い合わせはこちらから！

「手動広告が良いって聞いたけど、どうやって貼るの？」
「はてなブログでHTMLって…難しそう…」

そんな不安を抱えている初心者さんでも大丈夫！
この【中編】では、Googleアドセンスの広告コードを取得する方法から、はてなブログに手動で貼り付けるまでの手順を、ステップ形式でわかりやすく解説していきます。

実際にやってみると、「えっ？これだけでいいの？」と拍子抜けするくらい簡単なんです。
コードといっても、ほぼコピペでOK。必要な作業はほんの数ステップだけ。
難しい操作は一切不要です！

また、どこに広告を貼れば効果的か、読者の邪魔にならずに自然に配置できるかといった**「おすすめの貼り付け位置」**についても、実例を交えて紹介していきます。

「ブログで収益化したい」「デザインは崩したくない」そんなあなたにぴったりの内容になっていますので、ぜひ読み進めて手動広告デビューを成功させましょう！

 

 

 

アドセンスの広告コードを取得しよう

 

まずはGoogleアドセンスにログイン

手動広告を貼るためには、まず「広告コード（広告ユニット）」を発行する必要があります。
これはGoogleアドセンスの管理画面から数分で作成できます。

  1. Googleアドセンス にログイン

  2. 左メニューから「広告」→「広告ユニットごと」を選択

    アドセンスの広告コードを取得しよう

    アドセンスの広告コードを取得しよう

  3. 「ディスプレイ広告」をクリック

  4. 任意の名前を入力（例：「記事中_1」など）

  5. 広告タイプは「レスポンシブ」に設定

    アドセンスの広告コードを取得しよう

  6. 「作成」をクリックすると広告コードが発行されま

 

広告コードの中身ってどんなもの？

発行されたコードは、以下のようなHTML形式になっています👇

html
<div class="adsense"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="1234567890" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

このコードはそのまま使えるので、コピーしてはてなブログのHTMLモードに貼るだけでOKです。
data-ad-client（あなたの広告アカウント）と、data-ad-slot（広告ユニット番号）が正しく表示されていることを確認しておきましょう。

 

広告ユニットは複数作っても大丈夫？

「毎回同じ広告ユニットでいいの？」と疑問に思う方もいるかもしれませんが、実は広告ユニットは複数作って問題ありません。

たとえば以下のように使い分けると、収益分析がしやすくなります。

用途 ユニット名の例 設置場所
記事冒頭用 article_top 導入文の直後
記事中用 article_middle h2見出しの直後
記事下用 article_bottom 本文の終わり

このようにユニット名を整理しておくと、アドセンスの管理画面で「どの位置の広告がクリックされたか」がわかりやすくなりますよ。

広告ユニットは複数作っても大丈夫？

コードをコピーして次の準備へ！

広告コードが準備できたら、次はそれをはてなブログに貼る作業に入ります。
ここからはHTMLモードを使った作業になりますが、コピペでできるので安心してください。

次章では、実際にどの場所にどのように貼ればいいのかを、手順つきで詳しく解説していきます！

 

 

 

 

HTML編集モードで広告を貼る方法

はてなブログの「HTML編集モード」に切り替える

はてなブログにGoogleアドセンスの広告を貼るには、記事投稿画面を「HTML編集モード」に切り替える必要があります。
最初は少し戸惑うかもしれませんが、やることは「コードを貼るだけ」なので、想像よりもずっと簡単です。

【手順】

  1. はてなブログの管理画面から「記事を書く」または「記事を編集」を開く

  2. 上部の「編集モード」から「HTML編集」を選ぶ

  3. 広告を挿入したい位置にカーソルを合わせて、コピーした広告コードを貼り付ける

※見たままモードやMarkdownでは正しく動作しない場合があるので、「HTML編集モード」で作業してください。

 

 

どこに貼る？おすすめの配置ポイント

手動広告の強みは、「自分で好きな場所に貼れること」。
でも自由すぎると逆に迷ってしまうこともありますよね。
そこで、はてなブログで特に効果が出やすい「おすすめの貼り付け位置」をご紹介します。

場所 理由
✅ 導入文の後（2〜3行目） 最も目に留まりやすくクリック率が高い
✅ h2見出しの直後 記事を読み進める流れを邪魔しない
✅ 記事末尾（結論の下） 読了後の自然なアクションに繋がりやすい

1記事につき2〜4個程度が目安。貼りすぎると逆効果になるので注意しましょう。

HTML編集モードで広告を貼る方法



コピペOK！おすすめ広告コード（テンプレ）

以下は、はてなブログで使いやすい広告コードのテンプレートです👇

html
 
<div class="adsense"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-client="ca-pub-あなたのID" data-ad-slot="あなたのユニット番号" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>
 

貼り付けた後は、必ずプレビュー表示で不自然な位置になっていないか確認しましょう（広告は表示されないこともありますが、配置場所は確認できます）。

 

装飾用CSSで見た目を整える（任意）

もし広告が他の要素にくっついてしまう場合は、CSSを使って上下に余白を持たせると見た目が整います。

html
<style> .adsense { margin: 20px 0; text-align: center; } </style>

このコードを広告の前か、記事の最初に入れておくと、どこに貼っても美しく表示されますよ！

 

 

 

 

手動広告を貼るおすすめ位置と注意点

 

1記事に何個まで貼っていいの？

Googleアドセンスには明確な「広告数の上限」はありませんが、一般的に1記事あたり2〜4個程度が最適とされています。

貼りすぎると次のような問題が起きやすくなります：

  • 読者が「広告だらけ」と感じて離脱する

  • ページが重くなって表示が遅くなる

  • Googleから「広告過多」と判断され、制限されるリスクがある

記事の長さや構成にもよりますが、目安として以下のように考えると良いでしょう👇

記事の長さ 広告数の目安
1000〜2000字 2か所（冒頭＋末尾）
2000〜3000字 3か所（冒頭＋中盤＋末尾）
3000字以上 4か所までOK（＋サイドバーなど）

手動広告を貼るおすすめ位置と注意点



読者に嫌がられない配置のコツ

手動広告は「どこに貼るか」で読者の印象が大きく変わります。
広告のクリック率を高めつつ、読者の体験を損なわない配置が理想です。

特におすすめの配置は以下の3つです👇

  1. 導入文のあと（1〜2段落目の直後）
    　👉 記事のテーマがわかり、広告にも興味を持たれやすい

  2. h2見出しの直後（中盤〜終盤）
    　👉 セクションの切れ目に自然に挟める。読み流しを防止しやすい

  3. 記事の締めくくり（末尾）
    　👉 読了後に興味を持ちやすく、無理なくクリックにつながる

これらの場所に違和感のない形で広告を挿入するのがコツです。

手動広告を貼るおすすめ位置と注意点



 

スマホとPCで見え方が違う点に注意

読者の多くはスマホからブログを見ています。
そのため、スマホ表示で広告が大きすぎたり、文章にめり込んでいないかを必ずチェックしましょう。

広告の上下に適度な余白（CSS）をつけておくことで、スマホでも読みやすい記事が作れます👇

html
 
<style> .adsense { margin: 20px 0; text-align: center; } </style>

このひと工夫で、見た目が整い、読者のストレスも軽減されます。

 

貼ったあとも分析と改善を忘れずに！

広告を貼って終わりではありません。
設置場所ごとに広告ユニットを分けておくと、アドセンスのレポートで「どこがクリックされやすいか」を分析できます。

反応の良い位置を残し、効果が薄い箇所は調整することで、あなたのブログに合った収益スタイルが見えてくるはずです。

手動広告を貼るおすすめ位置と注意点



アドセンス手動広告の収益アップを目指すなら後編もチェック！

ここまでで、Googleアドセンスの広告コード取得から、はてなブログでの設置方法、さらにおすすめの配置パターンまでをご紹介してきました。

実際に広告を手動で設置するだけでも、読者の体験を守りつつ、収益化をスタートできるのは大きな一歩です。
ですが、「どこに貼るか」や「何個までにするか」だけでなく、貼った後にどう分析し、どう改善していくかが本当の勝負どころです。

後編では、そんな「収益を最大化しつつ、読者満足度も高める手動広告の運用テクニック」について詳しく解説していきます。

  • 手動広告は何個が最適なのか？

  • 読者に嫌がられない貼り方のコツとは？

  • スマホ表示の見え方とCSS調整の裏技

  • 収益とユーザー体験を両立させる考え方

初期設定だけで終わらせない、“長く稼げるブログ”を目指すなら、ぜひ次回の【後編】もご覧ください！

 

今回はここで終わりにしたいと思います！

最後までお読みいただきありがとうございました！


このブログでは「ChatGPT×副業」をテーマに、AIをフル活用したリアルな副業チャレンジを発信しています🎶

むずかしい話はナシで、「ちょっとやってみたいかも」と思えるような内容を目指しています😁

私は現在、ChatGPTを使ってTシャツのデザインを作って販売したり、

LINEスタンプのキャラ制作に挑戦したりしています👍

デザインの知識ゼロでも、AIの画像生成機能を使えばかなりいい感じになりますよ！

ブログの内容やSEO対策も、ぜんぶChatGPTに相談しながら書いています。

アイデアが出ないときも、相棒みたいに助けてくれます🎶

さらに、楽天ルームのレビュー文章もChatGPTと一緒に考えたり、

X（旧Twitter）の投稿や運用方法も提案してもらったりと、あらゆる場面でAIに頼っています。😅

「AIって便利そうだけど、自分にも使えるのかな？」

と思っている人には、ぜひ読んでほしいです。

このブログは、AI初心者でも副業が始められるように、

体験ベースでわかりやすく書いています。

私の成功も失敗もまるごとシェアしていくので、よかったら気軽に読んでいってくださいね。

Xでも日々の活動をゆるっと更新しているので、ぜひのぞいてみてください！

明日のあなたがより豊かになりますように😌

それでは、おやすみなさい😴