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

2026/03/27

2026/04/06

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

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

ところがJetThemeでは記事執筆中のプレビューモードでfunction jtCallback(){内の（/*Your Script is here to maintain performance.*/下に記述した）関数は動かないようで、本ブログで遅延読み込みしているSNSの投稿埋め込み・コードハイライト等の装飾用外部スクリプトが読み込まれずデザインの確認ができません。

そこでプレビューモード時だけ、必要な外部スクリプトを条件判定して読み込む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>で囲っています。本番表示には影響を与えません。

本スクリプトはDefer.js()関数の代替動作を想定しています。

コード上部のscriptMapに「対象要素のクラス名」と「スクリプトのURL」を記述しています。document.querySelectorでページ内に対象の要素が存在するかを判定し、該当するクラス名があればスクリプトを読み込むようにしています。本ブログで遅延読み込みしているGoogle code prettify・X (Twitter)・Instagramのスクリプトの場合は上記のように書きます。※例えばクラスtwitter-tweetがページ内にあれば<script src="//platform.twitter.com/widgets.js"></script>が出力されX (Twitter) の埋め込み投稿が装飾されます。

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

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

Blog