Bloggerの長所は、何といっても「本当に無料ブログかよ」と突っ込みたくなるぐらい、充実した機能とカスタマイズ性にあります。
その高機能っぷりを示しているのが、「連絡フォーム」と言うコンタクトフォームを気軽にブログに設置できる、と言うことではないでしょうか？
しかし、Bloggerの連絡フォームはサイドバーには設置しやすくなっているものの、サイドバーに付けると「ここじゃない感」がハンパではないのは、決して揺らぐことはない事実です。
ボクも結構このことで悩んでいたのですが、最近Bloggerの機能だけでお問い合わせページを作る方法を思いつき、カスタマイズに成功したので、その全手法をシェアしたいと思います。
では、早速いきましょう。
スポンサーリンク
まずは、コンタクトフォームを設置するための準備をします。
管理画面にログインした後に、左サイドバーの「テンプレート」をクリックし、その後「HTMLの編集」でテンプレート画面に行きましょう。 今度は、「ウィジェットへ移動」をクリックして「Blog1」を選択します。
ここまで手順を進めると、「Blog1」のところまでテンプレート画面がジャンプします。そして、ジャンプした位置からちょっと上へスクロールすると、以下の様なコードを発見できます。
<b:section class='main' id='main' name='Main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
上のコードの１行目にある「<b:section class～>」と言うコードの中に、「showaddelement="no"」と言う記述がある場合は、「no」の部分を「yes」に変更しましょう。
<b:section class='main' id='main' name='Main' showaddelement='yes'>//noをyesに変える <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
また、最初から「showaddelement="yes"」となっていたり、そもそも、そのコード自体がないと言う人は、そのままでOKです。
（showaddelementの記述がなければ、自動的に「yes」に設定されます）
補足：showaddelementとは？
ここで補足ですが、「showaddelement」とは、英語で分かりやすく書くと、「show add element」。つまり、「『ガジェットを追加』ボタンを表示するかどうか」を聞いている要素です。
今回の様に「yes」にしてあげると、「レイアウト」画面でウィジェットを追加できるようになります。
ここで終えると、今度は左サイドバーの「レイアウト」をクリックし、「ガジェットを追加」をしましょう。
「その他のガジェット」の項目の最初の方に「連絡フォーム」があるので、「+ボタン」をクリック。
その後、ガジェットのタイトルを変更できるので、「お問い合わせ」とか「コンタクトフォーム」とか、自分がしっくり来るタイトルにしましょう。
現段階では、ブログの全記事やカテゴリーページに連絡フォームが設置されていますが、これを連絡フォーム用の固定ページだけに表示させるように、カスタマイズしていきましょう。
まずは、その準備として、左サイドバーの「ページ」をクリックし、さらに「新しいページ」をクリックします。
固定ページの編集画面が表示されたら、タイトルを記入しましょう。また、本文中には何も書かなくて良いです。
また、お問い合わせページにコメントを表示させたくない場合は、右側に「オプション」と言う項目があるので、そこをクリックします。 そして、「閲覧者のコメント」の項目を「許可しない」にすればOKです。
些細なことですが、お問い合わせページにコメントがあったら、何だかカッコ悪いんで。
ここまで行くと、固定ページの完成です。後々のカスタマイズをやりやすくするために、先ほど作った固定ページ（下画像では「お問い合わせ」）にカーソルを近づけます。 すると、「表示」と言う項目が現れるので、それをクリック。
そしたら、先ほど作った固定ページにジャンプするので、その固定ページのURLをメモ帳か何かに、コピペしておいてメモして下さい。このURLは、後で使います。
まずは、テンプレートの編集画面に行き、「ウィジェットへ移動」→「ContactForm1」をクリックします。
そして、ContactForm1のコードの先頭を見てみると、以下のようになっていることが分かります。
<b:widget id='ContactForm1' locked='false' title='お問い合わせページ' type='ContactForm'> <b:includable id='main'> ・ ・ （中略） ・ ・ </b:includable> </b:widget>
なので、これを以下のように変えてあげます。
<b:widget id='ContactForm1' locked='false' title='お問い合わせページ' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:blog.url == "さっきコピペした固定ページのURL"'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>先ほど固定ページのURLをメモしましたが、そのURLを「さっきコピペした固定ページのURL」を削除してコピペして下さい。
１つ注意なのが、Bloggerの初期ドメインを使っている場合は、URLの「blogspot.jp」の部分を「blogspot.com」に変更してコピペして下さい。（独自ドメインの場合は、この手順は不要）
例えば、URLが「http://example.blogspot.jp/p/blog-page_27.html」の場合は、「http://example.blogspot.com/p/blog-page_27.html」に変えればOKです。 これで、お問い合わせページの完成です。
ここまで来たら、今度はお問い合わせページに飛ぶためのリンクを作っておきましょう。
おすすめの方法が、ヘッダーナビを作ってその中に「お問い合わせページ」へのリンクを貼り付ける、と言う方法。
とは言っても設置は簡単で、先ほど連絡フォームを設置したみたいに「レイアウト」から「ページ」と言うガジェットをヘッダー部分に追加するだけです。
「ページ」を追加すると、下の画像の様な編集画面になるので、先ほど作ったお問い合わせページの部分にチェックを入れます。
あとはカテゴリーページのリンクを貼ったりとかできるので、そこはお好みです。
以上の手順を全て終わらせると、一応お問い合わせフォームの完成になりますが、何だかデザインに「これじゃない感」がものすごく漂っているので、カッコよくしていきましょう。
まずは、テンプレートの編集画面に行き、以下のコードを見つけて下さい。
]]></b:skin>
見つけたら、上のコードを削除して、下のコードを元の場所にコピペして下さい。
/* 固定ページのコンタクトフォーム */
.ContactForm h2{
font-size:26px !important;
}
.form{
font-size:16px !important;
}
.contact-form-widget{
max-width:initial !important;
}
.contact-form-name,
.contact-form-email,
.form textarea {
max-width:initial !important;
width:95% !important;
height:initial !important;
border: 1px solid #ddd;
font-size:16px !important;
padding:6px 8px !important;
border-radius: 4px;
box-shadow: 1px 1px 2px rgba(0,0,0,.1) inset;
}
]]></b:skin>
<b:if cond='data:blog.url == "さっきコピペした固定ページのURL"'>
<style>
#Blog1{
display:none;
}
</style>
</b:if>これも先ほどのコードと同様に、「さっきコピペした固定ページのURL」の部分を固定ページのURLに変更して下さい。 これで、超すっきりとしたお問い合わせページを作る事ができました。
もし、「お問い合わせページを作って試しに「送信」ボタンを押したんだけど、メールが届かない」と言う人は、以下の方法を試して下さい。
Bloggerにログインした時に、画面右上に自分のアカウント名が表示されていますが、そこにカーソルを合わせて、「Bloggerプロフィール」をクリックします。
その後、人によっては「プロフィールが表示されません」と言うページが表示されますが、それに構わず「プロフィールを公開」をクリック。
ここまで来ると、プロフィールの設定画面にたどり着きますが、その中に「ユーザー情報」と言う項目があります。
で、そこの「読者があなたへの連絡に試用するメールアドレス」と言う項目があるのですが、そのメールアドレスにお問い合わせフォームのメールが届いているのです。
なので、ここに書かれているメールアドレスをチェックすると、きちんとお問い合わせメールが届いているはず。
基本的にBloggerを使っている人は、Gmailを頻繁に利用していると思うので、自分のGmailのアドレスに変更することをオススメします。
スポンサーリンク