この記事では「はてなブログ」に「ポップアップ」広告や「お知らせバナー」「イベント告知」を設置する方法を解説します。コピペOKのHTMLコードを公開しました。
「はてなブログ」からの収益を向上させるのにも効果がありそう！限定セール等の案内にも使えます。
- 他の人のブログや企業サイトを閲覧しているとき、記事を読んでいるとポップアップ広告やお知らせバナーが表示されることがありますよね。
- はてなブログでも、楽天やAmazonのセールをお知らせしてくれる「お知らせバナー」を表示して広告リンクを設定できます！
ということで、はてなブログで利用できる、セールのお知らせやポップアップ広告のお知らせバナーを表示するHTML・CSSコードを紹介します。
「コードを利用してみよう」と思った人は 読者登録 や はてなブックマーク登録 をお願いします。
※掲載のコードを利用する場合は自己責任でご対応ください*1。お問い合わせいただいてもカスタマイズのご相談には対応致しかねます。
- はてなブログにセール情報のバナーやポップアップ広告を設定する方法を解説
- はてなブログにポップアップ・バナー広告（お知らせ）HTML〜控えめバージョン〜
- はてなブログにポップアップ・バナー広告〜全画面表示バージョン〜
- お知らせバナー、ポップアップ広告HTMLのまとめとコード利用時の注意点
はてなブログにセール情報のバナーやポップアップ広告を設定する方法を解説
はてなブログにセール情報やポップアップ広告、イベント告知などのバナーを設定する方法を解説します。
設定方法は次のとおりです。
はてなブログ管理画面から「デザイン」＞「カスタマイズ」＞「ヘッダ」を選び、HTMLを設定する
指定のHTMLコード記述部分に、本記事のポップアップ広告・お知らせバナーのHTMLをコピペする
「ヘッダ」の「ブログタイトル下」にHTMLを追記する
ポップアップ広告・お知らせバナーのHTMLをあなたのブログのデザイン等に合うように色をカスタマイズする、リンク先を変更するなどして、調整する
本記事で紹介しているHTMLコードは、色やリンク先を変更することができます。
はてなブログにポップアップ・バナー広告（お知らせ）HTML〜控えめバージョン〜
はてなブログにポップアップ・バナー広告（お知らせ）を表示させるコードをご紹介します。
この記事では「控えめ表示」と「全画面表示」の2種類のポップアップ広告・お知らせバナーを設定するHTMLを掲載しています。
はてなブログの方がご自身のブログに利用される場合はコードをコピペしていただいて構いませんが、許可なく転載したり、コードを他の場所で公開することはご遠慮ください。
はてなブログにポップアップ・バナー広告（お知らせ）を設定するHTML〜控えめバージョン〜
はてなブログに、ポップアップ広告やお知らせバナー、イベント告知バナーを設置するHTML・CSSをご紹介します。
下記のHTMLコードをコピーして、一部をカスタマイズして利用することで、あなたのブログにポップアップ広告やお知らせバナーを表示させることができるようになります。
ブログの収益化向上のための顧客動線として使ってみよう、という人は設定してみてください。
<!-- ポップアップ広告 -->
<div id="popupOverlay" class="popup-overlay">
<div class="popup-ad"><span id="popupClose" class="popup-close">×</span>
<div>ポイント最大47倍！ 7/11まで</div>
<a href="https://hatena.blog/" target="_blank"><span class="blogicon-rakuten lg"> </span> 楽天市場をチェック</a></div>
</div>
<p>
<script>
const popupClose = document.getElementById("popupClose");
let hasShownPopup = false;
window.addEventListener("scroll", function () {
if (!hasShownPopup && window.scrollY > 500) {
popupOverlay.style.display = "flex";
hasShownPopup = true;
}
});
// ×ボタンで閉じる
popupClose.addEventListener("click", () => {
popupOverlay.style.display = "none";
});
</script>
</p>
<style>
/* 背景（オーバーレイ） */
.popup-overlay {
position: fixed;
bottom: 0;
height: 0px;
display: none;
justify-content: center;
align-items: flex-end;
z-index: 9;
--width : 320px;
left : calc(50vw - calc(var(--width) / 2));
width : var(--width);
}
/* ポップアップ本体 */
.popup-ad {
background: #fff;
padding: 15px;
width: 90%;
max-width: 320px;
border-radius: 10px ;
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.3);
position: relative;
text-align: center;
margin-bottom: 5px;
}
/* 閉じるボタン */
.popup-close {
position: absolute;
top: 5px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #999;
}
.popup-close:hover {
color: #990000;
}
/* リンク装飾（任意） */
.popup-ad a {
display: inline-block;
margin-top: 10px;
padding: 8px 20px;
background-color: #BF0000;/*楽天*/
color: white;
border-radius: 20px;
text-decoration: none;
}
.popup-ad a:hover {
background-color: #990000;/*楽天*/
}
</style>
はてなブログ向け セール・ポップアップ広告のバナーHTML・CSSのカスタマイズ
はてなブログ向け セール・ポップアップ広告のバナーHTML・CSSはカスタマイズが可能です。
例えば、Amazonのセール用にHTMLコードを書き換えるなら、上記コードの 5行目、66行目、72行目を下記の各コードに書き換えてください。
また、4行目、5行目の文字列は任意の言葉に変更してください。
なお、5行目の https://hatena.blog/ はボタンをクリックした時に表示する、リンク先のURLに変更してください。
<!-- Amazon用コード -->
<a href="https://hatena.blog/" target="_blank"><span class="blogicon-amazon lg"> </span> Amazonをチェック</a>
background-color: #FFA724;/*Amazon*/
background-color: #F06133;/*Amazon*/
上記のようにして、Amazon用以外にも色やリンク先をカスタマイズして利用できます。
はてなブログにポップアップ・バナー広告〜全画面表示バージョン〜
はてなブログにポップアップ・バナーの全面広告を設定する場合のHTMLコードもご紹介します。
「控えめ表示」と「全画面表示」のどちらがあなたのブログによりふさわしいか比較してみてください。
<!-- 全面ポップアップ広告 -->
<div id="popupOverlay2" class="popup-overlay2">
<div class="popup-ad2"><span id="popupClose2" class="popup-close2">×</span>
<h3>はてなブログ</h3>
<p>おすすめ記事や注目記事がいっぱい！</p>
<a href="https://hatena.blog/" target="_blank">今すぐチェック</a></div>
</div>
<style>
/* 背景（オーバーレイ） */
.popup-overlay2 {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 999;
}
/* ポップアップ本体 */
.popup-ad2 {
background: #fff;
padding: 20px;
width:80%;
max-width: 320px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: relative;
text-align: center;
}
/* 閉じるボタン */
.popup-close2 {
position: absolute;
top: 5px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #999;
}
.popup-close2:hover {
color: red;
}
</style>
<p>
<script>
const popupOverlay = document.getElementById("popupOverlay2");
const popupClose = document.getElementById("popupClose2");
let hasShownPopup = false;
window.addEventListener("scroll", function () {
if (!hasShownPopup && window.scrollY > 100) {
popupOverlay.style.display = "flex";
hasShownPopup = true;
}
});
// ×ボタンをクリック
popupClose.addEventListener("click", () => {
popupOverlay.style.display = "none";
});
// 背景をクリックして閉じる（広告の外側）
popupOverlay.addEventListener("click", (e) => {
if (e.target === popupOverlay) {
popupOverlay.style.display = "none";
}
});
</script>
</p>
お知らせバナー、ポップアップ広告HTMLのまとめとコード利用時の注意点
本記事では、はてなブログで「セールのお知らせ」や「ポップアップ広告」、「イベント告知」、「チェックしてもらいたい情報へのリンク」などを設定できる、ポップアップ広告やお知らせバナーを設定するHTMLをご紹介しました。
- 私の「はてなブログ」利用環境で利用していますが、利用しているブログテーマによっては既存のコードと競合して動かない場合があるかもしれません。*2
- 必ず変更前のHTMLのバックアップを取得しておくなど、自己責任、自己解決での対応をお願いします。
本記事のポップアップ広告にも使える「お知らせバナー」は、ブログの収益化以外にも活用できます。*3
ブログをカスタマイズして、読者が読みやすいブログを一緒に目指していきましょう。
*1:利用時のイメージは本サイトを参考にしてください。2025年7月現在、本記事でご紹介の「控えめお知らせバナー」を設定中です。
*2:CSSのクラス名が競合している場合などは動作しないことがあります。
*3:Google AdSenseを利用している場合、ポップアップを４つ以上表示することは禁じられているので注意してください。
