【Blogger】プレビューモード時に必要なスクリプトを読み込みデザインを確認【JetTheme】

2026/3/27

本サイトには、広告あるいはアフィリエイトプログラムによるアソシエイトリンクが含まれる場合があります。

本ブログで使用しているBloggerテーマ「JetTheme」にはdefer.jsが組み込まれており様々な要素の遅延読み込みに対応しています。本ブログでもGoogle code prettifyやX (Twitter) 、Instagram のスクリプトを遅延読み込みしています。

ところがJetThemeでは記事執筆中のプレビューモードでdefer.jsは動かないようで、本ブログで遅延読み込みしているTwitterやInstagram、コードハイライト等の外部スクリプトが読み込まれずデザインの確認ができません。

そこでプレビューモード時だけ、必要なスクリプトを条件判定して読み込むBlogger制御タグ・JavaScriptを導入しました。

導入する制御タグとJavaScript

コード全体

以下のコードをテンプレート内の適切な場所</body>の直前や、の下に配置します。

<b:if cond='data:view.isPreview'>
<!--deferjsで読み込む外部スクリプトをプレビュー時に別で読み込み-->
<script>//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  const scriptMap = {
    //'対象class':'script_URL',の形式で記述
    'prettyprint': '//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert',
    'twitter-tweet': '//platform.twitter.com/widgets.js',
    'instagram-media': '//www.instagram.com/embed.js',
  };

  for (const className in scriptMap) {
    if (document.querySelector(`.${className}`)) {
      const script = document.createElement('script');
      script.src = scriptMap[className];
      document.body.appendChild(script);
      console.log(`${className}が見つかったため、${script.src}を読み込みました。`);
    }
  }
});
//]]>
</script>
</b:if>

少し解説

プレビュー時にのみ本スクリプトが動作するように全体を<b:if cond='data:view.isPreview'>...</b:if>で囲っています。本番表示には影響を与えません。

コード上部のscriptMapに「要素のクラス名」と「スクリプトのURL」を記述しています。document.querySelectorでページ内に対象の要素が存在するかを判定し、該当するクラス名があればスクリプトを読み込むようにしています。本ブログで遅延読み込みしているGoogle code prettify・X (Twitter)・Instagram のスクリプトの場合は上記のように書きます。

プレビュー環境では表示パフォーマンススコアを意識する必要がないため、遅延読み込みはせず該当クラスが存在すればスクリプトを直接読み込むようにしています。

動作確認のためコンソールにログを残すようにしています。プレビュー画面を開き、ブラウザのデベロッパーツール（F12キー）のコンソールタブにて必要なスクリプトが読み込まれているか（あるいは不要なスクリプトが読み込まれていないか）確認できます。

Blog