設定

ライブラリー

インターネット Blogger 設定: ライブラリー

Blogger 設定ライブラリー

Google Blogger に外部ライブラリーを設定する方法を示します．ここでは，jQuery と MathJax をテーマ HTML に追加し，記事内で動作を確認する手順を説明します．

はじめに

Blogger では，テーマの HTML を編集することで，外部の JavaScript ライブラリーを読み込めます．このページでは，記事内で JavaScript を使いやすくする jQuery と，LaTeX 風の記法で数式を表示できる MathJax を例に説明します．

外部ライブラリーを追加すると，ブログの表示速度や安全性に影響することがあります．本当に必要なライブラリーだけを追加し，公式サイトや信頼できる CDN の URL を使います．テーマ HTML を編集する前には，必ずテーマのバックアップを取得しておきます．

共通の準備

jQuery も MathJax も，基本的には Blogger のテーマ HTML の <head> と </head> の間に読み込み用のタグを追加します．手順は以下のとおりです．

Blogger にログインし，対象のブログを選択します．
左側のメニューで[テーマ] をクリックします．
[マイテーマ]の[カスタマイズ]の横にある下向き三角をクリックし，[バックアップ]で現在のテーマを保存します．
同じメニューから[HTML を編集]を選択します．
<head> と </head> の間に，ライブラリーの読み込みタグを追加します．通常は <head> の直後，または既存の JavaScript 読み込み行の近くに記述します．
右上の保存アイコン ( ) をクリックします．

HTML では script タグは空要素ではないため，<script ...></script> のように開始タグと終了タグを明示して書きます．<script ... /> のような自己終了形式にすると，ブラウザや Blogger のテンプレート処理で意図しない動作になることがあります．

jQuery

jQuery は，HTML の要素操作，イベント処理，Ajax などを短く書きやすくする JavaScript ライブラリーです．最近の JavaScript は標準機能だけでも多くの処理を書けますが，既存のサンプルコードや古いテーマでは jQuery を前提としているものもあります．そのようなコードを使う場合に導入します．

jQuery の公式 CDN では新しい 4.x 系も提供されていますが，古いサンプルとの互換性を重視する場合は 3.x 系の最新版を使うのが無難です．ここでは jQuery 3.7.1 を例にします．

設定

Blogger のテーマ HTML の <head> と </head> の間に，以下を追加します．

<script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>

jQuery に依存する自分の JavaScript を追加する場合は，jQuery の読み込み行より後ろに書きます．読み込み順が逆になると，$ is not defined のようなエラーになることがあります．

動作確認

動作確認のために，新しい投稿を作成します．適当なタイトルを付け，HTML ビューで以下を記載します．

<div id="jQ_show"></div>

<script type="text/javascript">
  if(window.jQuery){
    jQuery(function($){
      $("#jQ_show").html("Hello world.<br>jQuery " + $.fn.jquery);
    });
  }else{
    document.getElementById("jQ_show").textContent = "jQuery is not loaded.";
  }
</script>

プレビューで「Hello world.」と jQuery のバージョンが表示されれば，jQuery は読み込まれています．表示されない場合は，テーマ HTML に追加した URL，script タグの閉じ忘れ，保存忘れを確認します．

MathJax

MathJax を使うと，Blogger の記事内で数式をきれいに表示できます．LaTeX と同じすべての機能が使えるわけではありませんが，分数，積分，行列，番号付き数式など，ブログ記事で使う多くの数式を表現できます．Blogger での具体例は，Blogger で MathJax を使うにあります．

古い解説では MathJax v2 や polyfill.io を使う例が残っています．現在は MathJax v4 を使い，polyfill.io は使わないほうが安全です．MathJax 公式ドキュメントでも，現在のブラウザでは polyfill は不要で，polyfill.io を使わないよう注意しています．

設定

Blogger のテーマ HTML の <head> と </head> の間に，以下を追加します．

<script id='MathJax-script' defer='defer' src='https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js'></script>

この設定では，TeX 記法と MathML を読み取り，CommonHTML 形式で数式を表示します．特定のバージョンに固定したい場合は，たとえば mathjax@4.0.0 のようにバージョン番号を含めます．通常は mathjax@4 としておけば，4.x 系の更新を利用できます．

インライン数式を $...$ ではなく $...$ でも書きたい場合は，MathJax の読み込み行より前に設定を追加します．ただし，通常の文章にドル記号を書く機会があるブログでは誤変換の原因になるため，最初は標準の $...$ を使うほうが安全です．

記事での書き方

MathJax を設定したら，記事の HTML ビューに数式を書きます．動作確認には，以下のような短い数式を使えます．

\begin{align}
f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz
\end{align}

プレビューまたは公開ページで見ると，以下のように数式として表示されます．

\begin{align} f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz \end{align}

記事を書くときは，インライン数式には $ a^2+b^2=c^2 $，独立した数式には \[ ... \] や \begin{align} ... \end{align} を使います．Blogger の作成画面で意図せず改行やタグが入ることがあるため，数式を含む記事は HTML ビューで確認します．

スマートフォン表示の注意

テーマやモバイル表示の設定によっては，PC では数式が表示されても，スマートフォンでは期待どおりに表示されないことがあります．まずはスマートフォンの実機またはブラウザのスマートフォン表示で確認します．

モバイルテーマで数式が表示されない場合は，[テーマ] > [カスタマイズ]の横の下向き三角 > [モバイルの設定]を開き，モバイルテーマを[デスクトップ]に変更すると改善することがあります．ただし，この設定はスマートフォンでの見た目全体に影響します．変更後は，本文，メニュー，画像，広告の表示も確認してください．

表示テスト

以下の MathJax 入力エリアに LaTeX 風の数式を入力し，[実行]をクリックすると，このページ内で表示を確認できます．[クリア]をクリックすると，入力内容を消去できます．

MathJax 入力エリア

ページ作成情報

参考資料

jQuery の「jQuery CDN」を参考にしました．jQuery の安定版と CDN URL を確認できます．
MathJax の「MathJax 公式サイト」を参考にしました．MathJax v4 の読み込み例を確認できます．
MathJax ドキュメントの「Getting Started with MathJax Components」を参考にしました．CDN からの読み込み，バージョン指定，polyfill.io を使わない注意点を確認できます．
Google の「ブログのデザインを変更する」を参考にしました．Blogger でテーマ HTML や CSS を編集する手順を確認できます．

更新履歴

2021年11月27日	ページの新規作成
2026年5月24日	jQuery と MathJax の設定手順，テーマ HTML 編集時の注意，スマートフォン表示，表示テスト，参考資料，インデントを修正