Bloggerで標準jsを無効にしながら純正の連絡フォームガジェットを使う方法

チマチマとブログのカスタマイズをしています。namimoriです。

今回は標準jsの無効化をしながら連絡フォームガジェットを使う方法について紹介します。

標準jsの無効化とウィジェットの機能停止

Bloggerで表示の高速化やPageSpeed Insights のスコア向上のため避けては通れないのが標準js（widgets.js）の無効化です。余計なスクリプトを読み込まないことでページの表示速度が向上します。

しかし、標準jsを無効化すると一部のウィジェット（ガジェット）が機能しなくなります。「連絡フォームガジェット」もそのうちの一つです。送信ボタンを押してもメッセージが送信されなくなります。

今回は「連絡フォームガジェット」を条件付きではありますが、標準jsを無効化しつつ利用する方法について書きます。（厳密には完全に無効化するわけではありません。しかしブログ全体としての高速化には繋がります。詳しくは後述。）

こちらのサイトの記事を参考にさせていただきました。（ただし、掲載のコードをコピペするだけだと上手くいかなかったので修正しました。）

Remove Default JavaScript [Widgets.js] from Blogger to Improve Loading Time – My Blogger Guides

方法

方法の概略と注意点

今回は以下の方法を組み合わせて利用します。

1. 個別ページに連絡フォーム（お問い合わせフォーム）を設置
2. </body>タグのコメントアウトにより標準jsを無効化
3. お問い合わせページでのみコメントアウトを解除し標準jsを読み込む

概略1 より、個別ページにのみお問い合わせフォームを設置する方法をとります。サイドバーやフッターに設置し全てのページに表示することはできません。また、概略2, 3 からわかる通り、ブログ全体で完全に標準jsの読み込みを無効化するわけではありません。しかし、通常のブログ記事ページでは標準jsの読み込みを止めることができるためこれらページは表示の高速化が期待されます。

個別ページに連絡フォームを設置

まず今回の方法では個別ページにのみ連絡フォームを設置する形式をとります。

namimoriは下記のサイトを参考にしました。

Bloggerの管理画面から「テーマ」→「HTMLの編集」より、テンプレートのbody終了タグ</body> を以下のコードで置き換えます。（テンプレートのHTML編集をするので事前にバックアップを取ることをおすすめします。）

<b:if cond='data:blog.url != &quot;【お問い合わせページURL】&quot;'>&lt;!--</b:if>
</body>
<b:if cond='data:blog.url != &quot;【お問い合わせページURL】&quot;'>--&gt;&lt;/body&gt;</b:if>

※「【お問い合わせページURL】」は各自のお問い合わせページURLに書き換えてください。

実際の置き換え例は下記の画像のようになります。

なお、上述の参考ページのコードをそのまま貼り付けたところnamimoriのブログ（テンプレートにQooQを使用）ではうまく機能しませんでした。「–」（ダッシュ）を「--」（ハイフン2つ）に置き換えたところ機能したため修正後のコードを掲載します。

あとがき

以上の方法により、「お問い合わせページURL」に指定したお問い合わせページでは標準jsが読み込まれるためBlogger純正の連絡フォームを使うことができます。一方でそれ以外のページでは標準jsの読み込みをコメントアウトにより止めることができるため表示の高速化が期待できます。

Bloggerでお問い合わせフォームを設置する方法として「Googleフォーム」を使う方法もありますが、なるべくBloggerの内部機能にまとめたい場合などに今回の方法は有効かと思います。