この記事では以下のようにWordPressで綺麗に＆簡単に数式を挿れる方法を紹介します。\[\lim_{n \to \infty} \frac{1}{n} \sum_{k=1}^{\infty}f(\frac{k}{n}) = \int_{0}^{1}f(x)dx\]
また，長い数式を次のように横スクロールで表示させる方法も紹介します。\[\sum_{k=1}^{n}k=1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20+21+22+23+24+25+26+27+28+29+30 \cdots +n \quad (n \geq 30)\]
- WordPressで数式を綺麗に入れる方法
- MathJaxのインストール方法と使い方
- 長い数式を横スクロールさせる方法
MathJaxのインストール
WordPressで上記のような数式を導入する方法として「MathJax」と呼ばれる無料プラグインを導入する方法を紹介します。
Mathjaxのインストール方法
まず，WordPress設定→「プラグイン」を開き，プラグインの検索欄に「mathjax」と入れて検索します。
検索すると様々なプラグインが出てくるので「Mathjax – LaTeX」を選び，インストールします。
インストール出来たら「有効化」ボタンを押して有効化しましょう。
有効化したら，再びプラグイン一覧から Mathjax の設定を開き「Force Load」の欄に✓を入れます。
✓ をつけることが出来たら「Save Changes」を押して設定を保存しましょう。
これでMathjaxの導入と設定は完了です。
実際に書いてみる
実際に数式を書いてみましょう。
数式を書くときの表式には「インライン表式」と「ディスプレイ表式」と呼ばれる２つの書き方があり，以下ではそれぞれの書き方について紹介します。
インライン表式とその表示方法
インライン表式（文中表式とも言います）は文字通り文中に数式を挿入する方式です。
\(pV=nRT\) や，\(\displaystyle \frac{1}{2}+\frac{3}{8}=\frac{7}{8}\) のように，文の中に数式を挿れることが出来ます。
インライン表式で書く際は，文中で \（ と ）\ で括ることで挿入することが出来ます。
例えば，上の式は編集画面上では次のように表示されます。
ディスプレイ表式とその表示方法
ディスプレイ表式はインライン表式とは違い，数式を新たに別の１行として表示させる方式です。
ディスプレイ表式では \[F(k)=\frac{1}{\sqrt{2\pi}}\int_{-\infty}^{\infty}e^{-ikx}f(x)dx\] \[f(x)=\frac{1}{\sqrt{2 \pi}}\int_{-\infty}^{\infty}e^{ikx}F(k)dk\]のように，独立の１行を数式として表示することが出来ます。
インライン表式で表示する場合は数式を \［と\］ で括ると，独立行の数式を表示することが出来ます。
同様に，上の式は編集画面上では次のように表示されます。
上記のように，長く複雑な数式ではディスプレイ表式で表示し，文中に入れても見づらくならないような簡単な数式はインライン表式で挿入する，といったようにその都度表式を使い分けるようにすることで見やすいサイトを作ることが出来ます。
コマンドを使って様々な数式を書く
基本的な書き方は \(\LaTeX\) と同様で，あらかじめ設定されたコマンドを呼び出して書きたい数式を書くことが出来ます。
コマンド一覧はこちらのサイトが非常によくまとまっているのでこちらのサイトを参考にしてください（中の人はいつもここで適宜調べながら打っています）。
実際に書いてみた
コマンドを利用して色々な数式を書いてみました。
例１
区分求積法の式 \[\lim_{n \to \infty} \frac{1}{n} \sum_{k=1}^{\infty}f(\frac{k}{n}) = \int_{0}^{1}f(x)dx\] は，実際には
\lim_{n \to \infty} \frac{1}{n} \sum_{k=1}^{\infty}f(\frac{k}{n}) = \int_{0}^{1}f(x)dx
と打って，括弧で括っています。1
例２
バーゼルの等式 \[\sum_{n=1}^{\infty}\frac{1}{n^2}=\frac{\pi^2}{6}\] は，実際には
\sum_{n=1}^{\infty}\frac{1}{n^2}=\frac{\pi^2}{6}
と打って，括弧で括っています。
横スクロールが途切れてしまう
こうして，様々な数式を表示することが出来るようになったのですが「数式が長すぎると画面を飛び出てしまう」という問題があります。
数式はプログラムで処理するときに改行が出来ない構造上，特にスマホ表示ではすぐに簡単に画面の外にはみ出てしまいます。
Cocoonでは数式がはみ出てしまった際に，サイト全体の横幅がスクロール出来るようになっており見栄えを気にしなければ実用上問題はありませんでした。
一方でSWELLでは数式がはみ出てしまった分はスクロール出来ず，読めなくなってしまうようです。
表示できないと色々困るので，CSSにコードを挿入し,横スクロールで表示できるように設定してみようと思います。
追加CSSにコードを挿入する方法
まず，WordPressのカスタマイザーを開きます。開いたら，一番下にある「追加CSS」を開きます。
そこに，次のCSSコードをコピーして貼りつけます。
span.MJXc-display{
overflow-x: auto;
overflow-y: hidden
; }
これで数式が横スクロールで表示されるようになりました。\[\sum_{k=1}^{n}k=1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20+21+22+23+24+25+26+27+28+29+30 \cdots +n\]
コメント