おやこでポレポレ《文房具好きブログ》

大好きな文房具や書籍、日常のことなどを更新中です!

ちょっとカスタマイズ。ブログに「問い合わせボタン」をつけてみた

 ブログを毎日書いていると、少しずつでも画面のカスタマイズを行いたくなってくる。衣替えというほど大きく変えるわけではないが、これまでも「+読者になる」ボタンの位置を変えたりスマホ用画面を変えたりしたが、今回は「問い合わせ用」のボタンをつけてみた。

「問い合わせボタン」で少しだけ雰囲気が変わる

f:id:polepole103:20150925212152j:plain

 今まで連絡用のメールアドレスは「プロフィール」の中に入れていたが、これだと気づかない人は気づかないのでボタンを設置して「問い合わせフォーム」に飛ぶようにしてみた。何かの問い合わせが欲しいわけではないが、ちょっとしたアクセントにはなっているのかなと思う。

 きっかけになったのは広野ヨウさんのブログ記事で、なるほどこうやって問い合わせフォームを作るんだなと興味深く拝見させていただいた。

 以前利用していたブログサービスを含めると10年近くブログを書いているが、これまでもいくつかの問い合わせや記事・写真の使用許諾依頼のメールをいただいたことがある。

 10年間で数えるほどしかいただいていない問い合わせだが、それでも私のブログを読んで連絡をいただくのはありがたいことなので、そういった方に少しでもお手間をかけないという意味でも設置してみた。

 ブログの記事を書くことにはマメなのに、ブログの見た目を変えることにはあまり積極的ではないので、今回のようにちょっとしたカスタマイズでもなんだか一仕事やり遂げたような気になってしまう。これだけでも満足感を覚えてしまうので、実にバーの低い満足度である。

「フォームメーラー」が使いやすかった 

 f:id:polepole103:20150925212048j:plain

 無料でメールフォームやアンケートを作ることのできるサービスはいろいろとあるが、いくつか見た中でも「フォームメーラー」が使いやすいなと感じた。広野ヨウさんの記事でもオススメのサービスとして紹介されていたが、確かに申し込み方法も含めて使いやすいと思う。

 また、無料版と有料版とがあるので、いろいろな用途に使用したり数多くフォームを作りたい方は有料版を選択するという手段もある。

f:id:polepole103:20150925213625j:plain

 無料登録を済ませるとすぐにフォームを作ることができる。アンケートフォームなども作ることができるし、メール用フォームも作ることができる。左側にあるボックスを右側にドラッグするだけでフォームが完成するので、あとは項目ごとに詳細な設定をおこなうだけで使うことができる。

 フォーム作成後に「コード表示」のタグをクリックすると、「URLリンク」と「埋め込みコード」が表示されるので、ここでは「URLリンク」をコピーしテキストエディタにコピー&ペーストをしておく。

 スマホ用の画面としても使用できるので、フォーム一覧でスマホ用としても使用できるように設定しておきたい。

はてなブログのサイドバーに設置する

f:id:polepole103:20150925214301j:plain

 無料画像サイトでいろいろなボタンが配布されているので、それらのサイトから画像をダウンロードして使用してみた。画像データのアドレスが必要なので、まずはデスクトップにダウンロードした画像を「記事を書く」画面にダウンロードした写真を貼り付ける。

f:id:polepole103:20150925214453j:plain

 この画面で「HTML編集」タグをクリックするとアドレスが表示されるので、「src="」のあとに表示されている画像URLをテキストエディタなどにコピー&ペーストをしておく。

 あとはブログ管理画面のダッシュボードを表示し、「デザイン」ー「カスタマイズ」ー「サイドバー」と進み、「モジュールを追加」をクリックし必要な情報を入れていく。

f:id:polepole103:20150925215455j:plain

 赤い部分に「メールフォームのURL」を、青い部分に「画像のURL」を入れて「適用」ボタンをクリックすれば出来上がり。サードバーの設置したい位置に移動させることで、好きな場所に問い合わせボタンを設置することができる。

<a href='(メールフォームのURL)' target='blank'><img src='(画像のURL)'></a> 

 ちょっとしたカスタマイズだが、自分のサイトがちょっとだけグレードアップしたような気になるカスタマイズだと思う。