WordPressできれいな数式を書く!【MathJax-LaTeXの導入法と使い方】

PR

こちらのブログで数式を入力するために、WordPressにMathJax-LaTeXを導入しました。

この記事ではMathJax-LaTeXの導入方法と使い方のポイント(コマンドを含めて)を説明していきます。

この記事はこんな人にオススメ
  • WordPressで数式を書きたい
  • LaTeXの数式の書き方を知りたい
目次

MathJax-Latex導入方法

MathJax-LatexはWordPressのプラグインで、理系の文書作成の定番LaTeXがWordPress上で使えるようになります。

クマ

LaTeXあるあるですが「WordPress上ではこう書く」という書き方がありますので、そのあたりも丁寧に説明していきます。

インストールはいつも通り、

プラグインで「MathJax-Latex」を検索→インストール→有効化でOK。

導入できたら、設定から「Force Load」だけチェックを入れておいてください。

MathJax-Latex設定

MathJax-Latexの使い方

ブロックで使うときは「$$」、インラインで使うときは「\( \backslash ( \)」「\( \backslash ) \)」で囲う

$$で数式を囲みます。例えば、

$$ \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x $$

は次のような式になります。

$$ \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x $$

ただし、これだと一つのブロックとして認識されるので、真ん中にドン!という形での数式出力になります。

インラインで数式を入力するときは

\( 数式 \)

で数式を囲みます。先ほどの先頭と末尾の「$$」は必要ありません。上記の形で囲ってあげるとこんな感じ、\( \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x \)になります。

ただ、この状態ではあまり見栄えが良くないので、上付き、下付きの式で形が変わる場合は、

\( \displaystyle 数式 \)

という感じで、\displaystyleを数式の先頭につけてやるとキレイな数式に整います。

この形で囲うと、\( \displaystyle \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x \)、こんな感じになります。

クマ

この\displaystyleは「分数がちっさいなぁ…」というときにも使います。
\(\frac{1}{2}\)(←\displaystyle無し)\(\displaystyle \frac{1}{2}\)(←\displaystyleアリ)
このコマンドは結構使いますね。

使えるLatexコマンド入力方法

まず、各コマンドを使う際に「\」(バックスラッシュ)を最初につけるのですが、

Mac : 「opt」+「|」

Windows :「¥」

でバックスラッシュを入力できます。地味にハマりポイントです。Macはバックスラッシュの入力法、Windowsは「¥=\」であることを確認してください。

以下に実際に使える記号一覧を載せておきますので参考にしてください。

クマ

色々なサイトにLaTeXの表記方法がありますが、残念ながらMathJax-LaTeXですべて使えるとは限りません。実際に使えるコマンドを並べておきます。

数式編

コマンド出力補足
分数\frac{a}{b}\( \frac{a}{b} \)
指数a^n\( a^n \)
添字a_n\( a_n \)
ルート\sqrt 2\( \sqrt 2 \)
n乗根\sqrt[3] 2\( \sqrt[3] 2 \)
複号\pm , \mp\( \pm , \mp \)
かける\times\( \times \)
わる\div\( \div \)
対数\log 2 , \log_{10} 2\( \log 2 , \log_{10} 2 \)
中(なか)点、三点\cdot , \cdots\( \cdot , \cdots \)
より小さい、以下\lt , \leq\( \lt , \leq \)
より大きい、以上\gt , \geq\( \gt , \geq \)
\angle\( \angle \)
順列{}_n P_r\( {}_n P_r \)添え字で表現しています
和Σ\sum_{k=1}^{n}a_k\( \displaystyle \sum_{k=1}^{n}a_k \)
極限\lim_{n \to \infty} a_n\( \displaystyle \lim_{n \to \infty} a_n \)\toは→、\inftyは∞
不定積分、定積分\int f(x)dx , \int_a^b f(x)dx\( \displaystyle \int f(x)dx , \int_a^b f(x)dx \)
ベクトル\vec{a} , \overrightarrow{AB}\( \vec{a} , \overrightarrow{AB} \)\overrightarrowの方がキレイにかぶるのでオススメ
よく使うコマンド一覧

式の体裁を整える

コマンド出力補足
連立\begin{cases}
x+y = 1\\
x-y = 1
\end{cases}
(最初のバックスラッシュは本当は半角で)
\(\begin{cases}
x+y = 1\\
x-y = 1
\end{cases}\)

装飾編

いくつか注意点があるので、それぞれの項目で説明します。

「フォントサイズについて」

MathJax-LaTeXはどうやら、フォントサイズ小がデフォルトサイズのようです(\smallコマンドでのサイズ)。

コマンド出力補足
フォントサイズ(極小)※小さめに見える\scriptsize{ax^2+bx+c=0}\(\scriptsize{ax^2+bx+c=0}\)
フォントサイズ(小)※デフォルト\small{ax^2+bx+c=0}\(\small{ax^2+bx+c=0}\)
フォントサイズ(通常)※大きめに見える\normalsize{ax^2+bx+c=0}\(\normalsize{ax^2+bx+c=0}\)
フォントサイズ一覧

「書体」

書体については特に言うことはないです。よく使いそうなものを載せておきます。

コマンド出力補足
ローマン\textrm{ABC abc あいう アイウ}\(\textrm{ABC abc あいう アイウ}\)ベクトルとかとよく使います。
\overrightarrow{\textrm{AB}}→\(\overrightarrow{\textrm{AB}}\)
ボールド\textbf{ABC abc あいう アイウ}\(\textbf{ABC abc あいう アイウ}\)
書体一覧

「文字色について」

1.定義されている色は「red」「blue」「green」「yellow」「magenta」「white」「black」の7色です。その他の色は16進数カラーコードで指定してください。

2.MathJax-LaTeXでは\colorboxコマンドは使えないようです(2021年12月現在)。残念。ただし、このブログはCocoonで作っているのですが、(現在はSWELLで運用中)Cocoonのマーカー機能はインラインでは有効なようです。

コマンド出力補足
赤文字\color{red}{ABC abc あいう アイウ}\(\color{red}{ABC abc あいう アイウ}\)
色を16進数で指定\color{#BC69F8}{ABC abc あいう アイウ}\(\color{#BC69F8}{ABC abc あいう アイウ}\)
文字色変更

Cocoonの機能でマーカーを引いてみる

\(ax^2+bx+c=0\)を解くべきである。」この通り、インラインでは有効。

$$ax^2+bx+c=0$$

「$$」で囲んだ際にはマーカー機能は無効になる(一応赤マーカーを引いている)。

コマンドを間違えていなくても、上手く式が表示されない場合があります(コピーとかしたときになりがち)。式全体をもう一度カット&ペーストし直してみてください。

(2022.1.30 追記)
上記の現象は、テーマに依るようです。
Luxeritas、Cocoonでは上記の現象が起きました。しかもコピーするたびに < meta charset=”utf-8” > タグが挿入されて、サーチコンソールからAMPエラーを受け取るようになったりして、結構面倒です…。
今使っているSEWLLでは上記の現象は起きませんでした。

まとめ

MathJax-LaTeXは、LaTeXのコマンドが全部使えるかというとそうでもないようです。ですが、ほとんど問題ないレベルで使えるので、数式を入力するなら非常にオススメのプラグインです!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次