×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ブログに数式を表示したい
自分のウェブサイトやブログ上で数式を表示したいという場面がしばしばあります．上付き文字や下付き文字 (10-15 とか H2O とか) のような html タグの機能で表示できる範囲内なら良いんですが，もうちょっと込み入った数式の表示となるとそれでは対応できなくなります．
一つの解決策としては，LaTeX で数式を生成して，その画像をアップロードするという方法があります．PDF に出力したのをキャプチャするとか，あるいはもっとシンプルに適度なサイズの png や jpeg ファイルとして出力させるツールもあります．ただ，画像を作ってアップロードして，それを貼り付けるというのも面倒．
この LaTeX で画像を生成してくれるオンラインサービスもあって，例えばオンライン LaTeX 数式エディタがその一例です．
ここで LaTeX のコードを打ち込むとその画像を自動で生成してくれるので，その画像に対応する URL を貼り付ければ表示できるというわけです．
例えばこんな感じ．
これはこれで悪くないんですが，そこそこ手間がかかることや，検索性が良くないなどなど，いろいろ思う所はあります．
ただ，最近はウェブ上で LaTeX のコマンドを使えるようにする機能があるようで，しかもヘッダ部分に数行追加すればオッケーという手軽っぷりなので，導入してみることにしました．導入を試みるのは Mathjax です．
Mathjax の導入方法
基本的な導入方法や使い方については，既存の様々なサイトを当たったほうが早いし，そちらの方が説明も的確でしょう．個人的には，このあたりのウェブサイトの記述を参考にしました．
端的に言うと，ヘッダの部分に
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
を追加しただけです．いろいろなカスタマイズが不要なのであれば，この 3 行をヘッダに追加するだけで OK．何かのインストールとかは不要です．src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
この script が，表示のために必要な諸々を読み込んでくる部分です．読み込み先として "cdn.mathjax.org" を紹介しているウェブページもありますが，ここは最近廃止になったので，"cdnjs.cloudflare.com" から読み込むようにします．上記で紹介したウェブサイトでも説明がされていますが，廃止になった cdn.mathjax.org もリダイレクトされているので問題なく使えているようですが，わざわざ廃止になっているのが分かっている方を使う必要はありません．新しい cdnjs.cloudflare.com の方を使いましょう．
ヘッダのどこに追加すればいいのか
追加する場所は，ヘッダのタグ内ならどこでも問題ありません．で，そのヘッダとは？というのがブログサービスではイマイチわかりづらいところです．
忍者ブログの場合，ブログをある程度カスタマイズしている場合はわかると思いますが，まずはブログ管理画面の上の方にある「デザイン」を選択します．そこで「PC用テンプレート」を選択し，使用中のテンプレートの「修正」を選択します．
そうするとブログデザインの編集画面が出てくるので，左上の「HTML編集」のウィンドウの中に追加します．このウィンドウの中をよく見ると，<head> と </head> というタグがあるので，この 2 つのタグの間に先ほどの 3 行を貼り付けます．
カスタマイズで更に別のスクリプトを貼り付ける際も，同じ範囲内に貼り付ければ良いです．
これで，PC 版のページでは Mathjax が使えるようになりました．
スマホからは数式が表示されない？
ところで上の方法だと，PC用のテンプレートしか編集していません．そのためパソコン用ページを表示した際は数式が表示されますが，スマホから見ると LaTeX コマンドがそのまま表示されてしまいます．スマートフォン用のテンプレートではどうやらヘッダタグ内をいじるという高度な設定が出来ないようです．そのため個別に設定はできませんが，PC用とスマートフォン用の共通タグを設定することは可能です．
再び「デザイン」を選択し，「共通タグ」を選択します．そうすると，ヘッダタグの間，body タグの間，記事下スペースのそれぞれを PC用とスマートフォン用同時に設定できる画面になります．
ここで，選択肢が </head> になっていて，説明書きに "</head>タグの直前に登録内容を表示します。" と出ていることを確認します．確認ができたら，下のウィンドウに先ほどの script をそのままコピペして保存します．
これで PC用ページもスマートフォン用ページも共通で設定してくれるので，実はそもそも PC 用のテンプレートの方をいじる必要は無かったのでした．
これで，PC 用のページでもスマートフォン用のページでも Mathjax が使えるようになりました．
実際に使ってみる
インライン表示の場合は \(x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}\) と表示できます．普通の LaTeX と同じく，displaystyle を用いれば \(\displaystyle{x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}}\) と分数が大きく表示されます．個別の数式の場合は例えば
\begin{align*}
x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}
\end{align*}
となります．
数式番号を付けたり参照したりも出来ます．
\begin{align}
x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}
\label{eq1}
\end{align}
\eqref{eq1} 式は二次方程式の解の公式です．
\begin{align}
x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}
\tag{A}
\label{eq2}
\end{align}
式の番号を自由に変更して \eqref{eq2} 式という表示にも出来ます．
画像ではなく文字として扱われるので，式 \eqref{eq3} のように色を変えたり，文字サイズを変えたりも可能です．
\begin{align}
x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}
\tag{C}
\label{eq3}
\end{align}
設定の方法は上記リンク先を参考にして下さい．
[0回]
PR
この記事のトラックバックURL
この記事へのトラックバック
