MathJax-LaTeX【初心者必見】ブログで分数やカッコをキレイに見せたい！

こんにちは。ねこの数式のnanakoです。

「MathJax-MaTex」を利用しているのに、数式が微妙な見た目になってしまうことありませんか？

せっかく「MathJax-MaTex」を利用するなら、キレイな見た目を追及したいですよね。

今回はさらにキレイに見せるためのコマンドなどを紹介していきたいと思います。

注意！

この記事上で表示している「￥」と「＄」は画面に表示するために全角で表示しています。実際に使用する際は半角で入力してください。
画面上で「 \ 」と表示されているものは「￥」を半角で入力したものと考えてください。
以下、コマンドを利用する際は、インライン数式モードで入力する際は￥(コマンド￥)のように入力してください。

目次！

空白・改行について
分数やカッコなどの見た目を調整
文字や数式のフォント・サイズ・色

空白・改行について

空白の入れ方

コマンド	表示
abc xyz 半角スペース	\(abc xyz\)
abc \, xyz	\(abc\,xyz\)
abc \ xyz	\(abc \ xyz\)
abc ~ xyz	\(abc~xyz\)
abc　xyz 全角スペース	\(abc　xyz\)
abc \hspace{15pt} xyz	\(abc \hspace{15pt}xyz\)

「MathJax-LaTeX」を利用する上では、半角スペースは表示に反映されないことに注意しましょう。

改行の仕方

コマンド	表示
abc xyz	\(abc xyz\)
abc \\ xyz	\(abc\\xyz\)
abc \\[15pt] xyz	\(abc \\[15pt] xyz\)

「MathJax-LaTeX」を利用する上で、「shift+enter」で改行しても表示に反映されないことに注意しましょう。改行するためには「 \\ 」を入力する必要があります。その際に、[〇pt] とつけることで行間が指定できます。

数式などの入力は半角スペースや「shift+Enter」を使って見やすく！

数式が長くなりすぎて自分でも何を打っているかが把握しづらいときに、半角スペースや「shift+enter」が表示されないことを逆手にとり、入力している数式を把握しやすくしています。

\(\begin{cases}
\small x+y= \displaystyle \frac{\sqrt{5}}{2} \\[5pt]
\small x-y= \displaystyle \frac{3\sqrt{5}}{2}
\end{cases}\) のように表示したい場合、下のようなコマンドになります。

￥(￥begin{cases}￥small x+y=￥displaystyle￥frac{\sqrt{5}}{2}￥￥[5pt]￥small x-y= ￥displaystyle￥frac{3\sqrt{5}}{2}￥end{cases}￥)
注意：￥は画面に表示するために全角にしていま。実際に利用する際には半角にしてください。

これは分かりづらいですよね。なので、半角スペースや「shift+Enter」を利用して見やすくすることで、コマンドの打ち間違いを防ぎます。

￥(￥begin{cases}
￥small x+y= ￥displaystyle ￥frac{\sqrt{5}}{2} ￥￥[5pt]
￥small x-y= ￥displaystyle ￥frac{3\sqrt{5}}{2}
￥end{cases}￥)
注意：￥は画面に表示するために全角にしていま。実際に利用する際には半角にしてください。

改行した際の等号(イコール)をそろえる

式を計算するとき、改行して下の行に書いていくことありますよね。その際、等号の位置がそろわずにイライラするなんてことありませんか？

そんなときに使うコマンドを紹介します。

【スペースだけで調整】

\((\sqrt{3}+\sqrt{2})^2=(\sqrt{3})^2+2\sqrt{3}\cdot\sqrt{2}+(\sqrt{3})^2\\
　　　　　　=3+2\sqrt{6}+2\\
　　　　　　=5+2\sqrt{6}\)

【コマンドを使って調整】

\(\begin{align}
(\sqrt{3}+\sqrt{2})^2&=(\sqrt{3})^2+2\sqrt{3}\cdot\sqrt{2}+(\sqrt{3})^2\\
&=3+2\sqrt{6}+2\\
&=5+2\sqrt{6}
\end{align}\)

先ほどの【スペースだけで調整】のコマンドは、

￥((￥sqrt{3}+￥sqrt{2})^2=(￥sqrt{3})^2+2￥sqrt{3}￥cdot￥sqrt{2}+(￥sqrt{3})^2￥￥
　　　　　　=3+2￥sqrt{6}+2￥￥
　　　　　　=5+2￥sqrt{6}￥)
注意：￥は画面に表示するために全角にしていま。実際に利用する際には半角にしてください。

イコールの位置を調整するために、全角スペース　を６個入れましたが、うまく調整できませんでした。７個にしても微妙なズレがありました。

「 \, 」などを利用すれば調整できなくもないですが、ちょっと大変ですよね。

こういう場面で、等号の位置を調整するのに便利なのが「 align 」「 eqnarray 」です。

今回は「 align 」を利用した調整の仕方を見ていきましょう。

￥(￥begin{align}
(￥sqrt{3}+￥sqrt{2})^2&=(￥sqrt{3})^2+2￥sqrt{3}￥cdot￥sqrt{2}+(￥sqrt{3})^2￥￥
&=3+2￥sqrt{6}+2￥￥
&=5+2￥sqrt{6}
￥end{align}￥)
注意：￥は画面に表示するために全角にしていま。実際に利用する際には半角にしてください。

等号を調整したい数式を、￥begin{align} と￥end{align} ではさんで利用します。

揃えたい等号の前に & を入れます。そうすると、& の後の等号の位置がそろうという訳です。

実は等号以外をそろえることもできます。

\((1)　x^2+2x-3=0\\　　(x+3)(x-1)=0\\　　x=-3,\,1\)

上の式は　￥((1)　x^2+2x-3=0￥￥　　(x+3)(x-1)=0￥￥　　x=-3,￥,1￥)　と入力したものです。

数式の左側がそろってないのが気になりますね。「 align 」を利用してそろえてみましょう。

\(\begin{align}
(1)　&x^2+2x-3=0\\&(x+3)(x-1)=0\\&x=-3,\,1
\end{align}\)

これは、￥(￥begin{align}(1)　&x^2+2x-3=0￥￥&(x+3)(x-1)=0￥￥&x=-3,￥,1￥ebd{align}￥)　と入力したものです。

このように、そろえたい文字の前に & を入力して位置をそろえることができます。

分数やカッコなどの見た目を調整

分数とカッコを表示するためのコマンドは覚えていますか？

MathJax-LaTeX【初心者必見】WordPressでよく使う数学記号のコマンド一覧

WordPressでプラグイン『MathJax-LaTeX』を利用する上で、よく使う数学記号のサンプルを一覧形式で紹介します。初心者でもコピーして利用することも可能です。WordPressで数学系のブログを作る際には必須なものばかりなので、ぜひ活用してください。

分数の見た目を調整

次の文章を見てください。

直線 \(y=\frac{1}{2}x\) の傾きは \(\frac{1}{2}\)

これは、「直線￥(y=￥frac{1}{2}x￥) の傾きは￥(￥frac{1}{2}\) 」を表示したものです。

インライン数式モードで入力しているせいで、\(\frac{1}{2}\) が潰れています。これはこれで見やすい場合もありますが、今回は少し残念な式に見えてしまいます。

この現象を解消するのが、「 \displaystyle 」です。

「直線￥(￥displaystyle y=￥frac{1}{2}x￥) の傾きは￥(￥displaystyle ￥frac{1}{2}\) 」と入力すると

直線 \(\displaystyle y=\frac{1}{2}x\) の傾きは \(\displaystyle \frac{1}{2}\)

このような形で分数が潰れずに表示できます。

カッコの見た目を調整

\((\frac{1}{2})^2 \) と \(\displaystyle(-\frac{1}{2})^2 \) は同じ値になる。

\((\frac{1}{2})^2 \) は「￥((￥frac{1}{2})^2 ￥)」と入力したものです。

\(\displaystyle(-\frac{1}{2})^2 \) は「￥(￥displaystyle(-￥frac{1}{2})^2 ￥) 」と入力したものです。

\((\frac{1}{2})^2 \) はそこまで違和感がありませんが、\(\displaystyle(-\frac{1}{2})^2 \) は明らかにカッコが小さいですね。これを解消するのが「 \left 」「 \right 」です。

大きさを調整したいカッコの前に「 \left 」や「 \right 」を入力します。先ほどのコマンドに以下のような変更を加えてみましょう。

￥(￥left(￥frac{1}{2}￥right)^2 ￥) と￥(￥displaystyle￥left(-￥frac{1}{2}￥right)^2 \) は同じ値になる。

このようなコマンドにすると

\(\left(\frac{1}{2}\right)^2 \) と \(\displaystyle\left(-\frac{1}{2}\right)^2 \) は同じ値になる。

自然なカッコのつけ方となりました。分数にカッコをするときは「 \left 」と「 \right 」を利用しましょう。

分数とカッコのサンプルまとめ！

最後に分数とカッコのサンプルを表示しておきます。

コマンド	表示
(\frac{1}{2})	\((\frac{1}{2})\)
\left(\frac{1}{2}\right)	\(\left(\frac{1}{2}\right)\)
\displaystyle(\frac{1}{2})	\(\displaystyle(\frac{1}{2})\)
\displaystyle\left(\frac{1}{2}\right)	\(\displaystyle\left(\frac{1}{2}\right)\)

「 \displaystyle 」を利用するかは、周りの文章や数式との関係で決めると良いと思います。

「 \left 」と「 \right 」は必ず利用した方が良いと思います。利用した見た目の方が明らかに見栄えが良いと思います。

文字や数式のフォント・サイズ・色

フォント

意味	表示	コマンド
ローマン体	\(\rm ABCabc\)	\rm ABCabc
ボールド体	\(\bf ABCabc\)	\bf ABCabc
イタリック体	\(\it ABCabc\)	\it ABCabc
サンセリフ体	\(\sf ABCabc\)	\sf ABCabc
タイプライタ体	\(\tt ABCabc\)	\tt ABCabc
フラクトゥール	\(\frak ABCabc\)	\frak ABCabc
スクリプトフォント	\(\scr ABCabc\)	\scr ABCabc
白抜き文字	\(\mathbb{ABCabc}\)	\mathbb{ABCabc}
カリグラフィー	\(\mathcal{ABCabc}\)	\mathcal{ABCabc}

サイズ

コマンド	表示
ABCabc	\(ABCabc\)
\Huge ABCabc	\(\Huge ABCabc\)
\huge ABCabc	\(\huge ABCabc\)
\Large ABCabc	\(\Large ABCabc\)
\large ABCabc	\(\large ABCabc\)

コマンド	表示
ABCabc	\(ABCabc\)
\normalsize ABCabc	\(\normalsize ABCabc\)
\small ABCabc	\(\small ABCabc\)
\scriptsize ABCabc	\(\scriptsize ABCabc\)
\tiny ABCabc	\(\tiny ABCabc\)

文字の色

数式や文字の色を変えるコマンドは、￥color{色}{数式} です。

色の部分には red, blue, green などを入力します。数式の部分には装飾したい数式を入力します。

色	表示	コマンド
赤 (文字色)	\(\color{red}{ABCabx123あいう}\)	\color{red}{ABC abc 123 あいう}
青 (文字色)	\(\color{blue}{ABCabx123あいう}\)	\color{blue}{ABCabx123あいう}
緑 (文字色)	\(\color{green}{ABCabx123あいう}\)	\color{green}{ABCabx123あいう}
黄 (文字色)	\(\color{yellow}{ABCabx123あいう}\)	\color{yellow}{ABCabx123あいう}
赤紫 (文字色)	\(\color{magenta}{ABCabx123あいう}\)	\color{magenta}{ABCabx123あいう}
白 (文字色)	\(\color{white}{ABCabx123あいう}\)	\color{white}{ABCabx123あいう}
黒 (文字色)	\(\color{black}{ABCabx123あいう}\)	\color{black}{ABCabx123あいう}
その他の色	\(\color{#bcdef0}{ABCabx123あいう}\)	\color{#bcdef0}{ABCabx123あいう}\