【WordPress】数式を美しく書けるプラグイン Simple MathJax が最強すぎる




WordPressで数式を表示させたい!

WordPressでサイトを運営していると、たまに

数式を書きたい

という瞬間があるでしょう。

 

ぼくはこれまで数々の数式を挿入してきましたが、普通に記述していました。

たとえば、

x + 2 = 4

みたいに。

 

読めなくはないですが、明らかに読みづらいですね。

この例だと「エックス(x)」と「掛け算の記号(×)」が紛らわしいです。

分数や平方根とかも絡んでくるとそれこそ地獄です。

「えいっ、伝われ」

と目を瞑りながら数式を書いていました。

 

最近、あまりにも数式が増えてきたので、ちゃんとしようと思い調べてみたところ、こちらの神記事がヒット。

なんと、

「Simple MathJax」を使えば美しく数式をかける

と判明したのです。

実際にやってみたところ、先ほどの数式は

$$x + 2 = 4$$

と挿入できました。

あまりにもの美しさに感動したので、その方法を紹介しますね。

 

Simple MathJaxとはどんなプラグインなの??

「Simple MathJax」とはこちらのプラグインの概要ページによると、

MathJaxをWordPress全ページに読み込めるプラグイン

です。

This wordpress plugin is yet another simple plugin to load the MathJax scripts at the bottom of all of your pages.

 

MathJaxとは、JavaScriptライブラリーの1種。

Wikipediaによると、

MathJax はMathML、LaTeX、ASCIIMathML(英語版)で記述された数式をウェブブラウザ上で表示するクロスブラウザ(英語版)のJavaScriptライブラリである

と書いてありますね。

正直よくわかりませんが、とりあえず「数式を美しく表示できるJavaScriptのライブラリ」と思っておけばいいでしょう。

このMathJaxをWordPressで使いやすくしてくれたのが「Simple MathJax」なのです。

 

 

WordPress記事中に数式を表示できる「Simple MathJax」の使い方

使い方は至って簡単。次の2つの方法が用意されています。

  1. ブロックとして改行込みで数式を挿入する
  2. 文中に数式を挿入する
Simple MathJaxをダウンロード、有効化しておきましょう

 

 1. ブロックとして「改行込み」で挿入する

1つ目の方法は、数式を単独で表示させたい時。

つまり、HTMLでいうと「ブロック要素」で表示したいときは、次のように記述します。

 

 

ずばり、ドルマーク($)2つで数式をサンドイッチ

こいつをWordPressの「ビジュアルエディター」に書けば数式が表示されますね。

例えば、

と記述した場合、次のように美しく表示されます。

$$x+2=4$$

中央寄せ・改行され、1行単独で数式が表示されますね。

 

2. 文中に数式を入れる

お次は文中に数式を仕込む方法です。

さっきと似ていますが、

ドルマーク($)の数を1つ減らします。

 

 

例えば、次のように文中に数式を混ぜられますよ。

 

$x+2=4$ は移項を使うと解けます。復習しておきましょう。

 

うん。先ほどのブロック要素よりも、数式が圧縮されていますね。

数式は小さくなりますが見えないことはないです。

文中に数式を紛れ込ませられるので、数式の説明を言葉でしやすいでしょう。

 

数式はどう書くのか?

Simple MathJaxの使い方は分かってきましたね?

ここで気になってくるのが、

どうやって数式を表現するのか

ということ。

 

シンプルな数式はまだしも、分数とか平方根とか行列とか三角関数が絡むと不安になります。

じつは、MathJaxでは「LaTex」という組版を使っています。

「組版」とは、文字や図写真を配置する作業のことで、そのシステムの一種がLaTex。

つまり、ウェブ上でどうやって文字や図を表現するのか取り決めたルールのことですね。

 

「LaTexの数式コマンド」はこちらのページを参考にしてみてください。

代表的なものでいうと、

意味 表記 表示
分数 \frac{分子}{分母} $\frac{分子}{分母}$
乗数 2^3 $2^3$
平方根 \sqrt{ 2 } $\sqrt{ 2 }$
合同 a \equiv b $a \equiv b$
連立方程式 \begin{eqnarray} \left\{ \begin{array}{l} x + y = 10 \\ 2x + 4y = 32 \end{array} \right.\end{eqnarray}
対数 \log x $\log x$
sin \sin x $\sin x$
cos \cos x $\cos x$
tan \tan x $\tan x$
行列 \begin{pmatrix} a & b \\ c & d \end{pmatrix}

などですね。

 

いやあ、すごい。

ありとあらゆる数式がそろってますね。

ぼくの数学レベルなら十分すぎるというか、逆についていけないです笑

MathJax、LaTexを生み出した人の情熱が伝わってきますね。

そして、WordPressユーザーがMathJaxを使いやすいようにしてくれたSimple MathJaxの作者にもありがたみを感じます。

世界はこうやって善意で回っているのですね。

 

AddQuicktagを活用するとなおよし

ただ、ここで問題になるのが

数式コマンドを覚えられない問題

sinとかcosとかはいいとして、連立方程式のコマンドは覚えられないだろっていう。

そこで活用したいのが「AddQuicktag」というプラグインです。

簡単にいうと、あらかじめ頻繁に挿入するタグを登録できるもの。

ワンクリックで記事中に挿入できるのです。

ぼく自身、WordPressサイトを運営する上で重宝しています。

 

AddQuicktagの設定画面から、Simple MathJax用にタグを登録しましょう。

たとえば、LaTexの「平方根表記」をよく使うならば、タグの開始欄に\sqrt{}を設定すればいいのです。

これならワンクリックで平方根を表示できます。
Image from Gyazo

よく数式を挿入する方は「AddQuicktag」を活用し、より美しく数式を挿入していきましょう。

 

それでは!

Lin

Pocket
LINEで送る




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。