Blogger 設定ライブラリー

Google Blogger のライブラリーの設定方法を示します．

jQuery

JavaScript を使う場合は，jQuery を使うと良いです．jQuary は，

jQuery は，高速で小さく，機能が豊富な JavaScript ライブラリです．多数のブラウザーで機能する使いやすい API により，HTML ドキュメントのトラバースと操作，イベント処理，アニメーション，Ajax などがはるかに簡単になります．汎用性と拡張性の組み合わせにより，jQuery は何百万もの人々が JavaScript を書く方法を変えました．

です(引用元)．Blogger の jQuery の導入は，以下のようにします．

メニューボタン () > テーマ > カスタマイズ▼の▼を順番にクリックし，「HTML を編集」を選択します．
表示された HTML を書き換えます．<head> と </head> の間に，以下を記載します．
```
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
```
私は <head> の次の行に記述しました．
右上の保存アイコン () をクリックします．
次に，jQuery の動作を確認します．そのために，新しい投稿を作成します．適当なイトルを付け，HTML ビューで以下を記載します．
```
<div id="jQ_show"></div>

<script type="text/javascript">
  $("div#jQ_show").html("Hello world.</br>jQuery "+ $.fn.jquery)
</script>
```
これは，jQuery のチェックプログラムです．これをプレビューで見ると，jQuery が正しく動作している場合「Hello world.」と「jQuery 3.6.0」と表示されます．この「3.6.0」は JQuery のバージョンです．

MathJax

MathJax を使うと Blogger で美しい数式を表示することができます．Blogger での具体例は，Blogger で MathJax を使うにあります．

設定

Blogger の MathJax の設定は，以下のとおりです．

メニューボタン () > テーマ > カスタマイズ▼の▼を順番にクリックし，「HTML を編集」を選択します．

表示された HTML を書き換えます．<head> と </head> の間に，以下を記載します．

<script src='https://polyfill.io/v3/polyfill.min.js?features=es6'/>
<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'/>

私は,前節の JQuery に引き続き記述しました．

右上の保存アイコン () をクリックします．
次に，jQuery の動作を確認します．そのために，新しい投稿を作成します．適当なイトルを付け，HTML ビューで以下を記載します．
```
\begin{align}
f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz
\end{align}
```
これは，MathJax のチェック用の数式です．これを Blogger で見ると，留数の定理の式が現れます． \begin{align} f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz \end{align}

スマートフォン表示のために

先の MathJax を設定する方法だと，PC で表示した場合は整形された数式が表示されます．しかし，スマートフォンでは LaTeX のソースが表示され，期待通りの表示 (数式) になりません．ただ，スマートフォンでもウェブバージョンであれば，きちんと数式が表示されます．そこで，スマートフォンのデフォルト表示もウェブバージョンにします．具体的には，以下のとおりです．

メニューボタン () > テーマ > カスタマイズ▼の▼を順番にクリックし，「モバイルの設定」を選択します．
モバイルテーマを選択で「デスクトップ」を選択します．
「保存」をクリックします．

以上で，スマートフォンでもウェブバージョンで表示されます．本当は，モバイルテーマの HTML が編集できれば良いのですが．．．．

表示テスト

以下の MathJax の入力テキストエリアに LaTeX コマンドを入力，[実行]をクリックすると，MathJax の表示が現れます．コマンド入力エリアは編集可能です．また，[クリアー]をクリックすると，全てのコマンドを消去できます．

MathJax テキスト入エリア

ページ作成情報

参考資料

更新履歴

2021年11月27日

ページの新規作成