ブログのプライバシーポリシーをモーダルで表示させてみた～Bulmaも導入～

せっかくブログを始めたけど、記事を書いていく前に色々やることがあるのでは？と思い、まず手始めにプライバシーポリシーを作成してみた。

【前提】

• Bulmaが利用可能であること（CDN追加）
• jQueryが使えること

出来上がったもの

・サイドバー（スマホだど画面下部）にプライバシーポリシーへのリンクボタン

・プライバシーポリシーのモーダルウィンドウ

エンジニアと言っておきながら、デザイン力が皆無なので・・・

cssフレームワーク(Bulma)を使いましたが、やっぱりセンスないなぁ。

仕組みは出来たので、デザインは後日頑張ろう。

サイドバーのモーダル表示ボタン

 やったこと

調査

◆他のブログではどのように設置しているのか？

・有料ユーザー

フッターやサイドバーのリンクで固定ページに記載

・無料ユーザー

aboutページに記載

自分もaboutページで作成しようと思いましたが、 編集エディタが小さいのと、プレビューがなかったので、面倒になりサイドバーにモーダル表示ボタン作ることにしました。

◆jQueryは利用可能か？（Bulmaはcssだけのフレームワークのため）

こちらのサイトを参照させていただきました。
blogenist.jp

◆どんな内容で記載されているのか？

一般的な内容に加え、広告関連の内容を追加したものが主流。

アドセンスはまだ申請していませんが、

こちらのブログから参照して使用させていただきました。

5hey.jp

実装（簡略）

「ダッシュボード」→「デザイン」→「カスタマイズ（icon)」→「サイドバー」→「＋モジュール追加」→「</>HTML」の順に進め、

表示されたエディタにボタンとモーダル内容、プライバシーポリシー本文記述。

◆css(Bulma)

Modal

https://bulma.io/documentation/components/modal/

◆jQuery

・DOMContentLoadedでDOM構成後に処理が開始するようにする。

(はてなブログのjQueryをそのまま利用する場合)

addEventListener('DOMContentLoaded', function() { ...本文 });

・ボタンクリックでモーダルを開き、親ページのスクロール制御。

・モーダルの×ボタンとモーダル外クリックで閉じる処理。

感想

あまり調査せず「はてなブログ」にしてみたけど、無料枠でも結構自由度がある印象。

jsとcssが使える人ならどうとでもなりそう。

他との差別化という観点からも、まあまあな出来かなぁ。

（デザインは別としてｗ）

こうして新しい記事も書けたしね。

 ※htmlのソースは需要があれば後日・・・やるかな？