いけch

このブログは『いけべい』がサラリーマンから脱却を目指す、すべての方に向けて情報を発信するブログです。

いけch

はてなブログにお問い合わせフォームを簡単に設置する方法

お問い合わせフォームを設置してみた

f:id:like-ch:20170907203043p:plain

これからブログを運営していくにあたって、

さらなる機能を追加しようと考え設置したのが「お問い合わせフォーム

ブログ運営で活躍しておられる先輩方のブログには必ずといっていいほど設置されていたことから

よし、僕もさっそく導入しようと思い設置しました。

これからたくさんの方のお問い合わせを待っていますね!

にほんブログ村 ライフスタイルブログ 暮らし上手へ  

f:id:like-ch:20170907191927p:plain

設置場所

サイドバーにあるABOUTページ(プロフィール)の中に設置してみました。

グローバルナビゲーション内の設置も考えましたが今回は断念…

とりあえず仮での設置ではありますが、我ながらいい感じになったなぁと思います。

それでは設置方法を紹介してみたいと思います。

お問い合わせフォームを設置するために準備するもの

  • はてなブログ
  • Googleアカウント
  • 画像

この3つで「お問い合わせフォーム」をはてなブログに導入することができます。

思ったより簡単に導入できて驚きました!

お問い合わせフォームづくり

www.google.com

お問い合わせフォームの作成には「Googleフォーム」を使います。

なんといっても簡単に作れちゃいますからねw

こちらのサイトを参考にして「Googleフォーム」でお問い合わせページを作っちゃってください。

5分もあればできると思うので挑戦してみてください!

tatujin.club

f:id:like-ch:20170907193731p:plain

お問い合わせフォーム作成後、上の画像のようなフォームのリンクをコピーなどして覚えておいてください。

画像の準備

f:id:like-ch:20170907193907j:plain

僕は上の画像を作成して使っています。

画像がないよって方は上にある画像を保存して使ってもらってもいいですよ~

デザインに自信がある方やこれだっていう画像がある人はそれを使ってください。

画像をアップロードしよう

はてなブログをやっている方ならこの「はてなフォトライフ」が使えます。

f.hatena.ne.jp

f:id:like-ch:20170907194619p:plain

こちらに画像をアップロードしてもらって、今回使う画像クリック、「ブログに貼り付ける」を押してください。

すると、その画像のhtmlコードが発行されるので、これもコピーなどして覚えておいてください。

※img src="画像のURL"になります。

はてなブログにお問い合わせフォームを導入

設定→デザイン→サイドバー→プロフィール

f:id:like-ch:20170907200124p:plain

上記の順番にアクセスしていくとこのような画面になります。

このうち編集するのは「ブログの説明」という欄です。

 

 

上記のhtmlコードをコピーして「ブログの説明」に貼り付けてください。

この際いじるのは、先ほど覚えてもらった

  • お問い合わせフォームのリンク
  • 画像のURL

この2つを変更してください。

これで「はてなブログ」への「お問い合わせフォーム」の設置は完了したと思います。

お疲れさまでした!!

最後の一言・・・

やっぱりお問い合わせフォームを設置してみるとブログを運営してるって気分になりますね。皆さんもどんどんブログをアレンジして自分だけのブログを作り上げてくださいね~!