フリー版(Pro版でない)はてなブログにメールフォームを設置

　先日設置したフリー版(Pro版でない)はてなブログにメールフォームを設置する方法を紹介します。

　ネットで探すとPro版への設置方法は沢山でてきますが、(探し方が悪かったと思いますが) 見つけられませんでした。（途中で諦めましたww）

　そこで、Pro版の設置方法でよくあるGoogleフォームを使って、ブログサイド・フッター・各記事の下にメールフォームへのリンクを設置しました。

◆ Googleフォームの設定とリンクURLを取得

　Googleフォームの設定は下のブログが参考になりますので、参照してください。

www.mutant-tetsu.com

　最後のタグの取得の部分だけ違います。
ここでは、Googleフォームへのリンクを取得します。

　上の画像の赤丸の部分をクリックすると、リンクURLが取得できるようになります。
リンクURLは一時的にメモ機能などあるエディタにでも貼り付けておきます。

◆ メールのアイコン画像を用意し、ブログにアップロード

　retireSakiでは、下の画像を作りました。

　※ 使うのであれば、自由にダウンロードして頂いても結構です。

　アイコン画像を、下書きブログなどを使って"はてな"にアップし、画像のURLを取得します。

◆ ブログに貼り付けるhtmlコードを作成
　Googleフォームで取得したリンクURLとアイコン画像のURLを元に下のようなhtmlコードを作成します。

<p><a href="https://goo.gl/forms/xxx" target="_blank" style="text-decoration: none;"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/r/xxxx/xxx.png" style="height: 16px;" /> <span style="color: #1464b3;">お問合わせはこちら</span></a></p>

　※ xxxは個人で違います。

◆ ブログにGoogleフォームへのリンクを貼付け

　これで必要なものは揃いましたので、実際にコードを埋め込みます。

　(1) サイドバーへの設置

　　デザイン→カスタマイズ→サイドバー→モジュール追加で、HTMLを選択します。
　　上のコードを本文側(下側)に貼り付け、適用します。

　(2) フッタへの設置

　　デザイン→カスタマイズ→フッタを選択します。

<p class="copyright">© 2018 retireSakiの日記 All rights reserved.</p>
<p><br /><a href="https://goo.gl/forms/xxx" target="_blank" style="text-decoration: none;"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/r/retireSaki/xxx/xxx.png" style="height: 16px;" /> <span style="color: #1464b3;">お問合わせはこちら</span></a></p>