WordPressで数式を書く方法

HTMLで数式を扱えないかと調べてみました。結論を言えば、ある程度まではCSSを使ってできないことはありません。しかし、きれいな数式や複雑な数式を書くにはHTMLやCSSだけでは、やはり無理があります。WordPressなら、MathJax-LaTeXプラグインをを使えば、LaTeX記法できれいな数式が表現できます。

tableを使った表組みによる分数表現

参照: http://atm-tkd.sakura.ne.jp/math/etc/bunsu/bunsuhyoki110218.html –(1)

a=b
c

Simplicityとは相性が悪いようで、正しく表示されません(tableに関してのCSSが定義されているのでしょう)。

CSSによる分数表現

参照: http://hooki.blog23.fc2.com/blog-entry-24.html
a=bc
それらしく表示できます。しかし、なんだか詰まった感じがします。=の前後を開けると下のように少し見やすくなります。
a = bc

指数や添字も付けられます。(1)のCSSを活用。

X = Y5Z1+ Z2

元コード

X = <span class="fraction">Y<span class="num_super">5</span><span class="sep"></span>Z<span class="num_sub">1</span>+ Z<span class="num_sub">2</span></span>

CSSによるルート記号

ルート記号は、HTMLでは&radic;で表現できますが、あくまで一文字です。式全体にかかるような表記はできません。無理矢理表現するなら括弧を使うくらい?

√(2 + x)

理解はできますが、さすがにこれは…。そこで、CSSと組合せてそれらしく見せる方法。
参照: http://sookibizviz.blog81.fc2.com/blog-entry-1850.html

2 + x

元コード

&radic;<span style="text-decoration: overline">2 + x</span>

これはそれらしく見えるのですが、指数や添字があると、残念ながら、線がガタガタします。

a = √b2+ c2

a = &radic;<span style="text-decoration: overline">b<span class="num_super">2</span>+ c<span class="num_super">2</span></span>

X = Y5Z1+ Z2

X = <span class="fraction">Y<span class="num_super">5</span><span class="sep"></span>&radic;<span style="text-decoration: overline">Z<span class="num_sub">1</span>+ Z<span class="num_sub">2</span></span></span>

MathJax-LaTex

MathJaxというJavaScriptを使った数式表現ライブラリがあります。これを使えば、きれいな数式が書けます。
参照: https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html

WordPressにはMathJax-LaTeXというプラグインがあります。これで、上のサンプルもこのように美しく表現できます。

$$a=\frac{b}{c}$$

$$a=\frac{b}{c}$$

$$a=\sqrt{b^2+b^2}$$

$$a=\sqrt{b^2+b^2}$$

$$X=\frac{Y^5}{\sqrt{Z_1+Z_2}}$$

$$X=\frac{Y^5}{\sqrt{Z_1+Z_2}}$$

日本語も大丈夫。

$$毎月の返済額=\frac{借入金額\times 利率 \times (1+利率)^{返済回数}}{(1+利率)^{返済回数}-1}$$

$$毎月の返済額=\frac{借入金額\times 利率 \times (1+利率)^{返済回数}}{(1+利率)^{返済回数}-1}$$

もちろん、ややこしい数式も。

$$\int_0^{\frac{\pi}{2}}\sin^n xdx=\int_0^{\frac{\pi}{2}}\cos^n xdx$$

$$\int_0^{\frac{\pi}{2}}\sin^n xdx=\int_0^{\frac{\pi}{2}}\cos^n xdx$$

参考:
日本語OKなWordPress数式プラグイン「Mathjax Latex」
http://webshufu.com/mathjax-latex/

MathJaxを使って、Web上に数式を表示
http://medemanabu.net/latex/mathjax/

LaTeXコマンド集
http://www.latex-cmd.com/

MathJax-LaTeXでは、数式はセンタリングされます。このサイトでは、下記サイトを参考に、左詰めのCSSを追加して式を左に寄せています。

WordPressで数式を使うにはMathJax-LaTeXプラグイン。左寄せはCSSで。 – 受験しない小学6年生とDadの勉強(もう中学生)
WordPressで数式を使うためのプラグインMathJax-LaTeXの導入。デフォルトで中央寄せの数式を左寄せにするにはstyle.cssへのコード追加で解決。
スポンサーリンク

フォローする

スポンサーリンク