解決済み!便利な上へ戻る「↑」ボタンをChatGPT先生にお願いしてズラしていただきました

CSSで解決!便利な上へ戻る「↑」ボタンをChatGPT先生にお願いしてズラしていただきました

ブログ運営WordPress,Luxeritas,ChatGPT

外部送信規律(法律)のために表示させているポップアッププラグイン「Cookie Notice & Compliance for GDPR / CCPA」のせいで、便利な上に戻る「↑」ボタンが隠れてしまいます。ChatGPT先生願い!上にズラして!!

ChatGPT先生に書いてもらったコードで「↑」が上にズレました


意外と閉じてくれないポップアップ

外部送信規律(法律)のために表示させているポップアッププラグインですが、邪魔なのに意外と閉じてくれません。

Cookie Notice & Compliance for GDPR / CCPAプラグインイメージ
外部送信規律に対応するためにCookie Notice & Compliance for GDPR/CCPAプラグインを入れてみた

そんなユーザーの動きがなぜが何故分かるかというと、無料でで使えるヒートマップツール「Microsoft Clarity」のおかげです。

これを見るとユーザーがサイトでどういう動きをしているかが分かるのですが、ご覧のようにポップアップはスルーです。

Microsoft Clarityのレコーディングイメージ

無料でヒートマップが使えるよ!Microsoft Clarityを入れてみた

 

閉じないということは、邪魔ではないという事で良いことなのかもしれませんが、しかしこのポップアップのせいで便利な「↑」ボタンが隠れてしまします。

ChatGPT先生にお願いすれば何とかしてくれるはず!

なるほど、Luxeritasの「上に戻る」ボタンが、Cookie Notice のポップアップに隠れてしまうんですね。これは z-indexの競合 か、ボタンの表示位置(fixedのbottom位置) が影響してる可能性があります。以下のどちらかで対処できます。

私には全くちんぷんかんぷんですが、ページのソースを確認したらz-indexという文字がありましたので、まぁそうなのでしょう。。。

ChatGPT先生にコードを書いてもらいました

早速、ChatGPT先生にコードを書いてもらいました。

/* Luxeritas「上に戻る」ボタンの z-index を調整して前面に表示 */
#page-top {
bottom: 90px !important; /* 必要に応じて調整 */
}

これをCSS(「カスタマイズ」>「追加CSS」)に貼り付けるだけです。

カスタマイズ>追加CSS(イメージ)

「bottom: 90px」 というのは、画面下からボタンまでの距離ですので、高すぎたり低すぎたりした場合はこの数値を変更します。

ChatGPT先生に書いてもらったコードで「↑」が上にズレました①

おおお、すごい!!しかしあまり高いとポップアップを閉じたときに逆に邪魔になるので半分隠れるくらいのほうが、ポップアップを逆に閉じてくれるかもしれません。

ChatGPT先生に書いてもらったコードで「↑」が上にズレました②

ChatGPT先生に書いてもらったコードで「↑」が上にズレました③

ChatGPT先生に書いてもらったコードで「↑」が上にズレました④

ChatGPT先生、ありがとうございます!!感謝です!!

ポップアップは必ずしも必要なものではない

アクセス解析や、広告の効果測定にはCookieやウェブビーコンなどのツールを使いますので、外部送信規律に関する説明ページは必要です。しかし、日本の法律では、どのページからも容易に「外部送信規律についての説明が書かれたページ」にたどり着ければ、問題ないとされています。

改正電気通信事業法(外部送信規律)は個人ブログでもアフィリエイトやアクセス解析を導入している方は対象です

例えばショッピングサイトや会員サイトなどを運営している場合は、ログイン状態の維持や、カート情報の保持、パスワードの自動入力などの個人情報をCookieで行いますのでポップアップによる通知も必要かと思いますが、一般的なブログやサイトの場合はそこまでは行いません。

  • アクセス解析や広告利用について明記したポリシーページがある。
  • そのページへフッターやサイドバーなどからすぐアクセスできる。
  • サイトの主な対象が日本国内ユーザーである。 欧州ユーザーが主なターゲットではない(GDPR非対象)
  • Cookieで取得する情報が氏名・住所などの「個人情報」ではない。

ということであれば、外部送信規律に関する説明は必要ですが、ポップアップまでは必要ではないと考えます。

※これは運営者の解釈によるものです。詳細は法律の専門家にご確認ください。

まとめ

ChatGPTなどの「対話型AI」にお願いすれば何でも解決してくれます。まれにメチャクチャな回答をすることもありますが、最近のAIの進化には目を見張るものがありますね。

AIイメージ

対話型AIもいくつかありますが、メジャーなところで比較すると、ChatGPT >> Grok >> 越えられない壁 >> Geminiという感じですかね(いずれも無料バージョン)。

 

日々勉強です。