MathJax-LaTeXの導入法と数式入力方法!WordPressで使う際の注意点もまとめました

PR

ブログで数式を入力するにあたって、WordPressにMathJax-LaTeXを導入しました。MathJax-LaTeXの導入方法と使い方(コマンドを含めて)を説明していきます。

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

MathJax-Latex導入方法

MathJax-LatexはWordPressのプラグインです。したがって、プラグインで「MathJax-Latex」を検索→インストール→有効化で導入できます。簡単。導入できたら、設定から「Force Load」だけチェックを入れておいてください。

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 \)、こんな感じになります。

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました!

ゆるいクマの「学校あるある」は毎日使いたくなること間違いなしです!

よく使うLatexコマンド入力方法

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

Mac : 「opt」+「|」

Windows :「¥」

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

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

数式編

コマンド出力補足
分数\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} \)
よく使うコマンド一覧

装飾編

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

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

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

クマ

昔TeXを使って卒論を書いた記憶があります。久しぶりにTeXを、しかもWordPress上で書いて、なんとも懐かしい不思議な感覚ですね。

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