はてなブログ無料版で固定ページ風のお問い合わせフォームを設置する方法。

f:id:quietplace_1:20200816014950j:plain

無料版お問い合わせフォーム

こんな感じのお問合せフォームを作りました。

こちらがお問い合わせフォームです。

お問い合わせ

現在は固定ページに移転しています。

f:id:quietplace_1:20200325113510p:plain

タイトルや記事上や記事下を消していますがこれは無料版はてなブログなので固定ページではありません。

あと記事一覧にも出ないように設定しています。

今回はこのやり方を紹介します。

やり方

注意

今回のカスタマイズは自己責任でお願いします。

何らかの不具合などが出たとしても責任は取れません。

コメントであればできる限りは対応はします。

Googleフォームでお問合せフォームの作成

Googleアカウントにログインした状態で上記のサイトにアクセスします。

f:id:quietplace_1:20200325125231p:plain

そして空白を選択し

このようなレイアウトにします。

f:id:quietplace_1:20200325125439p:plain

回答の検証という機能を使うとメールアドレスの形式が違う場合にエラーが出るようになっています。

f:id:quietplace_1:20200325125747p:plain

 完成したら右上にある送信を押してHTMLをコピーします。

f:id:quietplace_1:20200325130655p:plain

はてなブログで記事を作成する

注意

※今回は見たままモードのやり方になります。

はてなブログで新たに記事を作成し先程コピーしたHTMLをHTML編集に貼り付けます。

f:id:quietplace_1:20200325131129p:plain

 するとこのようになると思います。

f:id:quietplace_1:20200325131804p:plain

ですがこのままだとタイトルや記事上、記事下が表示されたままになってしまいます。

これがあると記事っぽさが出てしまい個人的には気に入らないです。

これを消したい場合は下で解説してます。
ですがこのままでいい方はこのまま公開してしまいましょう。

投稿する時刻は初投稿の年より一年前の時間に投稿することをおすすめします。

要するに2020年が初投稿だったら2019年に投稿することにしておくということです。
そうすることで記事一覧で一番下に出るため固定ページのように使えます。

f:id:quietplace_1:20200325133514p:plain

CSSでカスタマイズ

まず最初は記事のタイトルや記事上・記事下を消します。

<style><!--
/* タイトル・日付・記事上・記事下・コメントを削除 */
.entry-header,
.entry-footer {
display: none;
}
/* ページャー */
.pager {
display: none;
}
--></style>

これをお問い合わせフォームの記事のHTML編集の中に貼り付けます。

f:id:quietplace_1:20200325134523p:plain

これだけです。 

最新記事やアーカイブや記事一覧からお問い合わせフォームを削除

/* 月間アーカイブから2019年を消す */
.archive-module-year[data-year="2019"] {
display: none;
}
/* アーカイブページから特定の記事を消す */
.archive-entry[data-uuid="UUIDを指定"] {
display: none;
}

このコードを「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。

f:id:quietplace_1:20200325141854p:plain

まず変更するところが2箇所あります。
「月間アーカイブから2019年を消す」についてですが先程書いた2020年が初投稿だったら2019年に投稿の部分です。

初投稿の年より一年前に投稿しておかないと初投稿のアーカイブまで消えてしまいます。

今回は2020年を初投稿とし2019年にお問合せフォームを投稿したことにしているため2019年を削除します。

年は[data-year="2019"] の2019の部分を書き換えればOKです。

 「アーカイブページから特定の記事を消す」の「UUIDを指定」はデロッパーツールを使い確認します。

Chromeの場合はF12を押すことによって確認できます。

これがデロッパーツールです。

f:id:quietplace_1:20200325140712p:plain

ここにUUIDが書いてあります。

f:id:quietplace_1:20200325140824p:plain

 

あとdisplay: none;をかなり使用するのでSEO面ではあまりよくはないです。

参考

はてなブログのトップページをWordPressの固定フロントページっぽくし、ホームページとして活用する方法 - Minimal Green