庭造りに挑戦!はなのガーデニング日記

庭造りとガーデニングの話

はてなProの固定ページでお問い合わせフォームを作ってみた!

今回はちょっとブログ運営に関する話題を。

 

最近、はてなProで固定ページが作れるようになりましたね! そこで、さっそくその機能を使ってお問い合わせページを作成してみました。

 

スポンサーリンク

 

 

はてなProで固定ページが作成可能に!

はてなPro限定の機能になりますが、固定ページが作成できるようになりました。

 

staff.hatenablog.com

 

固定ページって?

固定ページというのは、通常のエントリー記事と異なり、時系列で表示されない「静的なページ」です。

 

主に、お問い合わせや自己紹介、リンク集などとして使うのが一般的です。

 

ただし、カテゴリー設定ができない、トップページや記事一覧に表示されないなどの特徴があります。

 

詳しくは、上の記事に書かれていますので、ここでは割愛します。

 

 

お問い合わせページは固定ページで作るとより簡単

 

今までもお問い合わせページを作っているブロガーの方は多いと思いますが、通常記事で作成するため過去記事として表示するなどの裏技が必要でした。

 

しかし、固定ページで作成すれば、よりシンプルにお問い合わせページを作ることができます。

 

お問い合わせページを作るメリット

お問い合わせページというのは、ブログを訪問した人が直接ブログ運営者とコミュニケーションするためのページです。

 

質問や要望、意見など、ブログ運営者と連絡が取りたい時に使います。

 

コメント欄からもコミュニケーションは可能ですが、コメント欄は基本的に他のユーザーにも公開されてしまいます。

 

ですので、他のユーザーに公開されない方法でブロガーに連絡したいときのために、お問い合わせページ(もしくは連絡フォーム)を設置しておく方が親切です。

 

 

広告掲載のオファーが来ることも!

また、お問い合わせフォームを設置しておくことで、アフィリエイトプログラムなどの広告掲載依頼の打診なんかが来ることもあります。

 

さらに、お問い合わせページがあるということは、ブログ運営者への連絡がスムーズになるので、ブログそのものの信頼性がアップします。

 

ブログ運営で収益を上げたい方にとっては、メリットが多いので、設置しておくのがおすすめです。

 

 

実際に設置する方法

ここからは、具体的に固定ページでお問い合わせページを作る方法を説明します。

 

まず、「お問い合わせフォーム」を用意します。他のブロガーさんの記事を参考にしましたが、お問い合わせフォームを作る方法として、以下の2つの方法を見つけました。

 

1.グーグルフォームで作る方法

グーグルアカウントが必要です。

 

www.mutant-tetsu.com

 

www.tssb26.com

 

 

2.フォームメーラーで作る方法

saru-chaaan.hatenablog.com

 

 

私は、グーグルフォームを使ってお問い合わせフォームを作成しました。

 

作り方は、上記の記事に詳しく書かれていますので、そちらを参考にしながら、フォームを作成、コード取得までを行います。

 

固定ページを作成してコードを貼る

 ここでは、固定ページを作って「お問い合わせフォーム」のコードを貼るところを説明します。

 

まず、管理画面のメニューに表示される「固定ページ」をクリックします。

 

そうすると、以下のような画面になりますので、お問い合わせページのURLを決めて、「ページを作る」ボタンをクリックします。

 

私はinfoにしましたが、contactでもなんでもいいです。自分が分かりやすいように。

 

f:id:hanagardener:20170630203532p:plain

 

通常のエントリー記事作成画面とほぼ同じ編集画面が開きますので、そこに取得したフォームのコードを貼り付けます。

 

f:id:hanagardener:20170630205429p:plain

 

このとき、HTML編集にすることを忘れないでください。タイトルをつけて公開します。

 

PC表示ではこんな感じになります。フォームの背景色は、グーグルフォームを作るときにアレンジできます。

 

f:id:hanagardener:20170630205555p:plain

 

スマホ表示はこんな感じ。ちょっと、バランスがイマイチですが、まあ、いいかな。

 

f:id:hanagardener:20170630205741p:plain

 

お問い合わせページをサイドバーに表示させる

上にも書きましたが、固定ページは記事一覧やトップページには表示されません。ですので、ユーザーに気づいてもらいやすいように、サイドバーに表示させておきましょう。

 

管理画面のデザインからサイドバー編集を選択。モジュールの追加でHTMLを選び、コードを書き込みます。

 

<p>お問い合わせやご質問は<a href="お問い合わせページのURL" style="text-decoration: underline; font-weight: bold; color: #008080;">こちらのフォーム</a>からお願いします。</p>

 

「お問い合わせページのURL」の部分を自分で設定したお問い合わせページのURLに置き換えて使ってください。

 

 

f:id:hanagardener:20170630204517p:plain

 

これで、PC表示では、サイドバーにお問い合わせページへのリンクが表示されるようになりました。

 

 

スマホ版に表示させる

 

スマホ版の方もデザインをいじって、好きな場所にコードを埋め込めばOKです。

 

<p><i class="blogicon-mail"></i> お問い合わせは<a href="お問い合わせページのURL" style="text-decoration: underline; font-weight: bold; color: #008080;">こちらのフォーム</a>からお願いします。
</p>

 

 コチラのコードは、コピーして使っていただいてOKです。

 

炭酸せんべいのナカニシさんのコードを参考に、ちょっといじってみました。

 

 

f:id:hanagardener:20170630210050p:plain

 

 

 こんな感じで、記事下に常に表示されるようになりました。

 

どうでしょうか。ぜひ、試してみてください!

 

スポンサーリンク