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




WordPressの記事中に数式を表示させたいんだけど!

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

数式を書きたい

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

 

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

たとえば、

x + 2 = 4

みたいに。

 

読めなくはないですが、明らかに読みづらいですすね。この例だとエックスと掛け算の記号が紛らわしいですし、分数や平方根とかも絡んでくると地獄でしたね。

「えいっ、伝われ」

と目を瞑りながら記事に数式を挿入していました。

 

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

なんと、

「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ライブラリである

と書いてありますね。

うん、よくわからんけどとりあえず「数式を美しく表示できるありがたいもの」と思っておけばいいでしょう。

このMathJaxをシンプルにWordPressで使いやすくしてくれたのが「Simple MathJax」というプラグインなのです。

 

 

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

このプラグインの使い方は至って簡単。次の2つの方法が用意されています。

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

 

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

数式を単独で独立させて挿入して表示させたい時。

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

 

 

つまり、ドルマーク($)を2つずつ使って数式をサンドイッチするわけです。

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

例えば、

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

$$x+2=4$$

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

 

2. 文中に数式を入れる

お次は文の中に数式を紛れ込ませる方法です。

その場合、さっきと似ていますが、

ドルマーク($)の数が1つ減って次のように書きます。

 

 

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

 

$x+2=4$ は移項という技を使うと解けるようになりますね。ぜひ復習してみてください。

 

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

段落 p要素の大きさに合わせて数式の文字サイズが圧縮されての表示になります。

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

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

 

数式はどう書くのか?

だいたい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で送る

コメントを残す

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