Blogger に Cookie 同意バナーを追加する方法

公開: 2023-04-23

インターネットを閲覧していると、Cookie を受け入れるか拒否するかを尋ねる Cookie 同意バナーに出くわしたことがあるでしょう。 これらのバナーは、データのプライバシーとオンライン追跡に関する懸念が高まっているため、Web サイトの標準機能になっています。

Blogger を使用しているブロガーの場合、サイトに Cookie 同意バナーを追加して、一般データ保護規則 (GDPR) やカリフォルニア州消費者プライバシー法 (CCPA) などの規制に確実に準拠することが不可欠です。

クッキー同意バナーとは何ですか?

Cookie 同意バナーは、 Web サイトに表示されるポップアップ ウィンドウまたはバナーで、Cookie の使用についてユーザーに通知し、ユーザーの情報を保存またはアクセスするための同意を求めます。

Cookie は、ユーザーが Web サイトにアクセスしたときにユーザーのデバイスに配置される小さなテキスト ファイルです。 これらは、ユーザーの好みを記憶し、Web サイトのアクティビティを追跡し、よりパーソナライズされたエクスペリエンスを提供するために使用されます。 ただし、Cookie はターゲットを絞った広告や追跡にも使用できるため、ユーザーに通知し、受け入れるか拒否するかを選択できるようにする必要があります。

Cookie 同意バナーを Blogger サイトに追加するのは、いくつかの手順で完了する比較的簡単なプロセスです。 以下のセクションでは、Blogger に Cookie 同意バナーを追加する手順の概要を説明します。

Blogger に Cookie 同意バナーを追加する方法

Blogger で Cookie 同意バナーまたはポップアップを追加するには、次の手順に従います。

  1. Blogger ダッシュボードを開き、テーマ セクションに移動します。
  2. 次に、カスタマイズ ボタンのすぐ右側にあるドロップ ダウン メニューから、[HTML の編集] セクションをクリックします。
  3. ここで、終了 Body タグ (</body) を検索します。これは通常、テーマ コードの最後の 2 行目です。
  4. 指定されたコードをそのすぐ上に貼り付け、コードを保存して、Cookie 同意バナーを Blogger Web サイトに追加します。
 <div class='cookie-box'> <div class='cookie-row'> <div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><path d='M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z'></path><path d='M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z'></path><path d='M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z' fill='#7577a9'></path><path d='M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z'></path></svg></div> <div class='cookie-content'> <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p> <button class='cookie-buttons'>Accept!</button> </div> </div> </div> <style> .cookie-box.hide{display:none} .cookie-box { position: fixed; width: 90%; margin: 20px; max-width: 400px; min-height: 100px; background-color: #ffffff; box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%); z-index: 990; border: 2px solid lightgrey; border-radius: 6px; bottom: 15px; right: 0px; padding: 15px; } .cookie-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; align-content: center; justify-content: center; align-items: center; } .cookie-img{padding-right:20px} .cookie-img svg{fill:#333;width:60px;height: 60px;} .cookie-content p { position: relative; width: 100%; display: inline-block; font-size: 15px; color: #666666; margin-top: 0!important; } .cookie-content pa{text-decoration:underline;} .cookie-buttons { position: relative; width: 100%; margin-top: 10px; float: left; background-color: #7577a9; font-family: inherit; font-size: 14px; color: #ffffff; text-decoration: none; opacity: 1; border: none; cursor: pointer; font-weight: 500; padding: 5px; border-bottom: 2px solid rgba(0,0,0,0.1); border-radius: 6px; } </style> <script>//<![CDATA[ cookieChoices = {}; const cookieBox = document.querySelector(".cookie-box"), acceptBtn = cookieBox.querySelector("button"); acceptBtn.onclick = ()=>{ document.cookie = "CookieByKey2Blogging; max-age="+60*60*24*30; if(document.cookie){ cookieBox.classList.add("hide"); }else{ alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser."); } } let checkCookie = document.cookie.indexOf("CookieByKey2Blogging"); checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide"); //]]></script>

このコードは、デフォルトの Blogger cookie 通知を削除し、カスタム cookie 同意バナーを追加するか、ブロガー Web サイトに popup と言うことができます。

このコードは完全に最適化されており、SVG コードを使用しているため、ブロガー Web サイトのサイト速度について心配する必要はありません。

結論として、Cookie 同意バナーを Blogger サイトに追加することは、データ プライバシー規制を確実に遵守し、ユーザーに透明性を提供するために不可欠です。

この記事が、ブロガーの Web サイトにカスタムの Cookie 同意ウィジェットを追加するのに役立つことを願っています。 このコードに問題がある場合は、コメント セクションでお知らせください。

ところで、Blogger の読み込み速度を最適化するために私を雇うことができます。 詳しくはサービスページをご覧ください。