Bloggerで標準jsを無効にしながら純正の連絡フォームガジェットを使う方法
チマチマとブログのカスタマイズをしています。namimoriです。
今回は標準jsの無効化をしながら連絡フォームガジェットを使う方法について紹介します。
2025年追記：この記事はBloggerテンプレートにQooQを使用していた際に執筆したものです。現在でも本記事の方法は有効ですが、当ブログでは現在別のテンプレート（JetTheme）を利用しており、以下で紹介する方法は使っておりません。
標準jsの無効化とウィジェットの機能停止
Bloggerで表示の高速化やPageSpeed Insights のスコア向上のため避けては通れないのが標準js（widgets.js）の無効化です。余計なスクリプトを読み込まないことでページの表示速度が向上します。
しかし、標準jsを無効化すると一部のウィジェット（ガジェット）が機能しなくなります。「連絡フォームガジェット」もそのうちの一つで、送信ボタンを押してもメッセージが送信されなくなります。
今回は「連絡フォームガジェット」を条件付きではありますが、標準jsを無効化しつつ利用する方法について書きます。（厳密には完全に無効化するわけではありません。しかしブログ全体としての高速化には繋がります。詳しくは後述。）
こちらのサイトの記事を参考にさせていただきました。（ただし、掲載のコードをコピペするだけだと上手くいかなかったので修正しました。）
Remove Default JavaScript [Widgets.js] from Blogger to Improve Loading Time – My Blogger Guides
方法
方法の概略と注意点
今回は以下の方法を組み合わせて利用します。
- 個別ページに連絡フォーム（お問い合わせフォーム）を設置
</body>タグのコメントアウトにより標準jsを無効化- お問い合わせページでのみコメントアウトを解除し標準jsを読み込む
概略1より、個別ページにのみお問い合わせフォームを設置する方法をとります。サイドバーやフッターに設置し全てのページに表示することはできません。また、概略2, 3からわかる通り、ブログ全体で完全に標準jsの読み込みを無効化するわけではありません。しかし、お問い合わせページ以外のブログページでは標準jsの読み込みを止めることができページ表示は高速化されます。
個別ページに連絡フォームを設置
まず今回の方法では個別ページにのみ連絡フォームを設置する形式をとります。
namimoriは下記のサイトを参考にしました。
2025年2月追記：上記ページリンク切れにつき、Webアーカイブページあるいは以下のサイトをご参照ください。
Bloggerのお問い合わせフォームをページに設置する方法 - 1983NOTE
上記サイトによる手順の概略は以下の通りです。
- サイドバーもしくはフッターに連絡フォームガジェットを設置
CSSで↑これを非表示に- 個別ページを作成し、フォームのHTMLコードを記述（CSSで整形）
なお、注意点として個別ページURLはページタイトルに含まれるアルファベットに応じて自動で決まります。日本語タイトルには追従しないのと、最初に公開した時のURLで以降固定となるので、以下のような手順でページを作成しURLを設定すると良いです。
- ページタイトルを英語で「Contact」などと設定し一旦公開（ページURLが/p/contact.html等に決まる）
- 一旦非公開に（以降、タイトルを変更してもURLには影響なし）
- ページを編集し任意のページタイトルに設定しなおして再び公開
追記：お問い合わせページでのみ連絡フォームのソースを読み込み
上述の方法だと、要素を隠しているだけで全ページで連絡フォームのソースが読み込まれています。お問い合わせページ以外では読み込む必要がないので、以下のような条件文を記述するとさらに万全です。
Bloggerの管理画面から「テーマ」→「HTMLの編集」にてtype='ContactForm'と検索（ctrl+F）しヒットする<b:widget ... >内に以下の条件式を記述してください。
cond='data:blog.url == "【お問い合わせページURL】"'
【お問い合わせページURL】は各自のURLに置き換えてください。記述例は以下のようになります。※id='ContactForm1'等はテーマの編集状況により番号が異なる場合があります。
<b:widget cond='data:blog.url == "https://sample.blogspot.com/p/contact.html"' id='ContactForm1' locked='false' title='お問い合わせフォーム' type='ContactForm'></body>タグの書き換え
次に標準jsの無効化ですが、テンプレートのbody終了タグをコメントアウトする方法を利用します。（テーマのHTMLに「b:js='false'」を記述するタイプでは今回の方法は利用できません。「b:js」について記述しない、あるいは「b:js='true'」とテーマに記述した状態にしておきます。）
Bloggerの管理画面から「テーマ」→「HTMLの編集」より、テンプレートのbody終了タグ</body>
を以下のコードで置き換えます。（テンプレートのHTML編集をするので事前にバックアップを取ることをおすすめします。）
<b:if cond='data:blog.url != "【お問い合わせページURL】"'><!--</b:if>
</body>
<b:if cond='data:blog.url != "【お問い合わせページURL】"'>--></body></b:if>※「【お問い合わせページURL】」は各自のお問い合わせページURLに書き換えてください。
実際の置き換え例は下記の画像のようになります。
なお、上述の参考ページのコードをそのまま貼り付けたところnamimoriのブログ（テンプレートにQooQを使用）ではうまく機能しませんでした。「–」（ダッシュ）を「--」（ハイフン2つ）に置き換えたところ機能したため修正後のコードを掲載します。
あとがき
以上の方法により、「お問い合わせページURL」に指定したお問い合わせページでは標準jsが読み込まれるためBlogger純正の連絡フォームを使うことができます。一方でそれ以外のページでは標準jsの読み込みをコメントアウトにより止めることができるため表示の高速化が期待できます。
Bloggerでお問い合わせフォームを設置する方法として「Googleフォーム」を使う方法もありますが、なるべくBloggerの内部機能にまとめたい場合などに今回の方法は有効かと思います。
namimori
namimori（なみもり）と申します。歌やギター、弾き語り等の音楽関係の他、Androidスマホ、フリーソフト等を用いたPC活用などが趣味。便利な仕組みを考えたり、自分で作る・直すことが好きです。
このブログをフォロー
clone_withGT-1.jpg)
