大変だけど6人家族の幸せ ~小さな幸せ探し~

家族に感謝感謝 大変だからこそ、小さな幸せ見つけて、毎日ほっこり^-^

無料版はてなブログにお問い合わせフォームを設置する方法 PRO版共通


 

はてなブログにアドセンス必須の、お問い合わせ設置をしました。

設置方法って、初心者の人にはわかりにくいです(涙)

アドセンス申請のために、僕も前に設置したので書いてみました。

 

参考ページ(無料版設置)

nakomii.hatenablog.com

設定の準備

①Google Chromeを使用

②Googleアカウントでログインをしておく

この辺りは、たくさんの人が説明ありますので、省略させていただきます。

Googleフォームの作成(無料版・PRO共通)

今回は以下のようなお問い合わせフォームの作成です。

f:id:kage-tora-sama:20190810163036p:plain

作成方法

Google Chromeを起動して右上①の四角を押すと、タブが下に現れます。

画像では「さらにもっと」になっていますが、人によっては「もっと見る」になっている場合がありますが、「もっと見る」→「さらにもっと」をクリックします。

 

f:id:kage-tora-sama:20190810160024p:plain

 

クリックすると下記のような画面になりますので、マウスのホイールクリクリで下のほうにある「フォーム」という所を探し、クリック。

これも人によっては場所が違う場合がありますf:id:kage-tora-sama:20190812092819p:plainf:id:kage-tora-sama:20190810160618p:plain

この画面が出ると思いますので、赤丸をクリック!

TOMが気になりますがスルーします。

 

f:id:kage-tora-sama:20190810160827p:plain

 

赤丸で囲ってある、空白をクリックします。

f:id:kage-tora-sama:20190810160942p:plain 

フォーム作成画面に切り替わります。

①に「お問い合わせフォーム」

②に「お問い合わせ」

上記は僕が入れた題名等です。(必要に応じ題名等は変更してくださいね)

f:id:kage-tora-sama:20190810161034p:plain

 

ラジオボタンをクリックして、記述式に変更します。

f:id:kage-tora-sama:20190810161344p:plain

f:id:kage-tora-sama:20190810161502p:plain

 

①にお問い合わせの人の名前を入れてもらうように「名前」

②必須項目にする為、ONにします。(項目により必須の必要ない場合あり)

③+を押して項目の追加をします。

今回は「名前」「メールアドレス」「件名」「お問い合わせ内容」の4項目です。

「名前」「メールアドレス」「お問い合わせ内容」は必須条件にしてあります。

ここで注意!

「お問い合わせ内容」の項目、は記述ではなく、段落にしてください。

段落にしないと、問い合わせの内容の文字数が少なく書けなくなります。フォームの保存等は必要ないので、これでフォームの作成はひとまず完了です。

f:id:kage-tora-sama:20190810161621p:plain

 

f:id:kage-tora-sama:20190810161831p:plain

 

おまけ

①のパレットを押すと、背景色を変えたり、フォントを変更できます。

②の目?をクリックすると、現在作成したフォームのプレビューが見られますので①と併用してご使用ください。

③はブログに設置するときに使いますので、説明は後で書きます。

 

f:id:kage-tora-sama:20190812094234p:plain

f:id:kage-tora-sama:20190812094457p:plain

 

お問い合わせフォームを設置する

はてなブログPROに設置する。

先ほどの③の送信をクリックします。

何かを送信するわけではなく、HTMLコードを入手するためです。

送信タブをクリック後、①<>をクリックすると、②HTMLコードが表示されますので、コピーをしておきます。

f:id:kage-tora-sama:20190812095811p:plain

 

 はてなブログ側の設定

今度ははてなブログ側の設定になります。

ダッシュボードの中の固定ページをクリックします。

f:id:kage-tora-sama:20190812100731p:plain

 

固定ページを作成画面が出てきましたので、赤丸の中に作成したい文字を入れましょう。

僕は分かりやすいように「otoiawase」にしました。

次はその横の、ページを作るボタンを押します。

f:id:kage-tora-sama:20190812100945p:plain

 

下の画面が現れるので(見慣れた記事作成の画面です)

①にタイトルを入れます。ここも僕は「お問い合わせ」にしました。

②先ほどコピーしたコードを張り付けるために、②を押します。

 

f:id:kage-tora-sama:20190812101352p:plain

 

ここに先ほどコピーをした、お問い合わせフォームのコードを張り付けます。

貼り付けたら、プレビューで必ず確認してくださいね。

左下の公開を押しましょう。

f:id:kage-tora-sama:20190812102608p:plain

 

固定ページのページの管理に入っていたら、ちゃんと作成できています。

作成できていない場合は、固定ページの作成から、もう一度作成してみてください。

 

f:id:kage-tora-sama:20190812105436p:plain

 

固定ページをサイドバーに表示する。

ダッシュボード下のデザインをクリック。

f:id:kage-tora-sama:20190812110816p:plain

スパナマーク?をクリックして、サイドバーをクリックします。

f:id:kage-tora-sama:20190812110905p:plain

モジュールを追加をクリック。

f:id:kage-tora-sama:20190812111200p:plain

  

モジュールを追加画面が現れます。

①のリンクをクリックします。

②に「お問い合わせ」と入力。

③に「お問い合わせフォームと」入力。

④に先ほど固定ページで作った、お問い合わせのアドレスを入れます。

⑤の適用を押す。

f:id:kage-tora-sama:20190812194648p:plain

 

お問い合わせアドレスが分からない方は、赤丸(ダッシュボード固定ページ)の右の記事を見るをご覧ください。

f:id:kage-tora-sama:20190812193945p:plain

 

最後に必ず、変更を保存するを押しましょう。

これでサイドバーに設置することが出来ました。

f:id:kage-tora-sama:20190812195022p:plain

 

無料版に設置する方法

googleフォームでお問い合わせを作成して、HTMLコードをコピーするところまでは共通です。

はてなブログダッシュボードの設定をクリックします。

f:id:kage-tora-sama:20190815222011p:plain

 

 基本設定をクリックします。

f:id:kage-tora-sama:20190812214133p:plain

ページ中段やや上のaboutページ編集をクリック。

 

f:id:kage-tora-sama:20190812214514p:plain

 

自由記述欄に、先ほどコピーしたHTMLコードを張り付けて、左下の変更するボタンをクリックします。

 

f:id:kage-tora-sama:20190812215620p:plain

 

以上で無料版はてなブログへのお問い合わせが完了です。

それでは、どうなっているか見てみましょう。

画像ではPRO版になっていますが、気にしないでください。

f:id:kage-tora-sama:20190812220138p:plain

自分のIDをクリックされるとaboutページに飛びます。

その中に、お問い合わせが設置されています。

aboutページの上部に、ブログの説明や、プライバシーポリシーを書いて、下部にお問い合わせを設置というような使い方もできます。

 

大変でしたが、ご苦労様でした。

皆様も頑張って設置して、アドセンス等頑張ってくださいね! 

スポンサーリンク
 

にほんブログ村 家族ブログへ
にほんブログ村