[Blogger] お問い合わせフォームとプライバシーポリシーの作成＆フッターリンク設置方法

当ブログでもお問い合わせフォームやプライバシーポリシーを設置したので、その作成・設置方法をまとめます。既にいろんな方が方法やサンプルを公開してくださっているので、大いに参考にさせていただきました。この記事では、それらの情報を整理しつつ、フッターにリンクを追加する独自の方法も紹介します。

お問い合わせフォーム

目的

お問い合わせフォームは、記事のコメントに書きづらい個人的な質問などがある読者のために用意するもので、メッセージはメールとして送信されます。当ブログではほとんど使われることはなさそうですが、後述するプライバシーポリシーのページでも「お問い合わせはこちらから受け付けます」という姿勢を示せるので、無いよりはある方が良いと思います。

ページ作成

当ブログでは、このようなページを作成しました。
Contact - Itching Ears by kamokamo

お問い合わせフォームは「レイアウト」のガジェット追加でも簡単に作れますが、見た目と操作性の点から「固定ページ」を作る方を選びました。固定ページは、Blogger管理画面左メニューの「ページ」から左メニュー上の「新しいページ」をクリックすると新規ページ作成画面になります。下記「moca」さんのページを参考にしてパパッと作れましたので、そちらをご覧ください。

Bloggerでお問い合わせフォームのページを作る方法

Bloggerでは、「連絡フォーム」のガジェットを使って、サイドバーなどにお問い合わせ（連絡）フォームを置くことができます。 ↓こんな感じです。 サイドバーにお問い合わせフォームを設置した場合 しかし、常にお問い合わせ（連絡）フォームが見えてい...

moca-memo.blogspot.com

ただし、いくつか注意があります。

1. なぜかパーマリンク（ページのURL）をカスタムできず、投稿時に設定したページタイトルに依存します。なので最初は"contact"など英語のタイトルにして投稿してください。日本語タイトルだと"blogger-page.html"のように分かりづらいURLになってしまいます。一度投稿した後にタイトルを変更すれば、URLは変わりません。
2. 検索に引っかかってほしくないので、"noindex"の設定をした方が良いです。設定方法は「ブロギングライフ」さんが参考になります。
   Bloggerで特定の投稿、ページにnoindex, nofollow等のメタタグを設定する方法 | Blogger101@ブロギングライフ

プライバシーポリシー

目的

プライバシーポリシーとは、「個人情報は適切に扱います」という宣言のことです。下記いずれかに当てはまる場合、プライバシーポリシーの掲載が必要と言われています。

1. お問い合わせページ等で個人情報（メールアドレス等）を記入してもらう
2. Googleアナリティクス（Blogger標準の統計機能も含む）等のアクセス解析ツールを使う
3. Googleアドセンス等の広告表示ツールを使う

また、他にも「掲載内容やリンク先によって生じた損害に対して責任を負いません」という免責事項や、「転載禁止」をうたう著作権なども明示しておいた方がトラブル防止のために良いでしょう。

ページ作成

当ブログでは、このようなページを作成しました。
Privacy Policy, Disclaimer, Copyright | プライバシーポリシー、免責事項、著作権 - Itching Ears by kamokamo

固定ページの作り方や注意点は上記「お問い合わせ」と同じです。文章は、こちらの「エックスサーバー」さんのブログが特に参考になりました。

【ブログに必須！】プライバシーポリシーと免責事項の書き方

ブログでプライバシーポリシーや免責事項が必要な理由をわかりやすく解説しています。また、実際に作成する際に役立つひな形も用意しています。

www.xserver.ne.jp

当ブログやコピーOKと表明している他サイトの内容を真似ても良いですが、まるごとコピペで済ませるとGoogleから「コピーコンテンツ」と見なされて評価が下がる場合があるらしいので、言い方を変えたりしてオリジナルな文章にしてください。

フッターにリンク設置

ここからは"QooQ"ユーザー向けの内容です。他のテーマを使っている方は当てはまらない部分があると思いますので、参考程度にご覧ください。

当ブログでは、作成したページのリンクをフッターに置いたので、フッター部分のHTMLをいじりました。フッターは、前の記事で改造しています。

[Blogger] フッターレイアウト - AttributionとCopyright

この記事では、「フッターレイアウト」の変更についてまとめます。フッターは、おそらくブログの中で最も見られることの少ない部分でしょう。でも、だからこそ、そこがきれいに整っていると「おっ」と思ってもらえます（たぶん）。

itchingears-kamokamo.blogspot.com

ビフォーアフター

こうだったのを

こうしました。

プライバシーポリシーとお問い合わせページへのリンクを追加し、前まで太字にしていたリンクが見づらく感じたので記事部分と同様に文字色を分けました。

これからHTMLを編集します。編集画面の開き方が分からない方はまずこちらの記事をご覧ください。

[Blogger] 改造の基本

この記事では、Blogger改造の基本として「カスタマイズ」「レイアウト」「HTML編集」の方法を簡単にまとめます。

itchingears-kamokamo.blogspot.com

HTML

<p id='copyright'>　を検索し、その部分をこのように書き換えます。

<!--  <p id='copyright'> <data:blog.title/></p> -->
  <!-- <p id='designed-by'><a href='http://qooq.dododori.com' target='_blank'>QooQ</a></p> -->
  <div id='copyright'>
  <p>&#169; 開始年<script>if(new Date().getFullYear()>'2020')document.write('-' + new Date().getFullYear());</script> Author | <a href='プライバシーポリシーページのURL'>Privacy Policy</a> | <a href='お問合せページのURL'>Contact</a></p>
  <p><i class='fab fa-blogger'/> Powered by <a href='https://www.blogger.com/' target='_blank'>Blogger</a> | Designed by <a href='http://qooq.dododori.com' target='_blank'>QooQ</a></p>
  </div>
  

最初の2行は元のコードで、コメントアウトしています。それ以降は、前述したフッターレイアウトの改良版です。

CSS

同じくHTML編集画面で　#copyright　を検索し、その部分のこのように書き換えます。

#copyright{
	text-align: center;
	font-size: 90%;
	margin: 1em 0;
	color: black;
	letter-spacing: 0;
}
#copyright a{
	color: $(brand.color);
}
/*
#copyright:before{
	content:"Copyright \0a9 "; 
}
#copyright:after{
	content:" All Rights Reserved."; 
}
#designed-by{
	text-align: center;
	font-size: 70%;
	margin-bottom: 1em;
	color: black;
	letter-spacing: 0;
}
#designed-by:before{
	content:"designed by ";
}
*/
  

下の部分は不要なのでコメントアウトしました。これで完了です！

おわりに

この記事では、お問い合わせフォームとプライバシーポリシーのページ作成とフッターへのリンク追加方法をまとめました。「ちゃんとやってる感」が出て少し嬉しくなります。

当ブログの改造リストはこちらをご覧ください。

[Blogger] 改造リスト

この記事では、当ブログで実施した改造内容を一覧にまとめます。詳細を記事にしたら、そのリンクを貼っていきます。

itchingears-kamokamo.blogspot.com