【MathJax】htmlで数式を綺麗にする方法(wordpress)

MathJaxを導入するやり方のサムネブログ運営

この記事では、wordpressで作るブログに、

綺麗な数式を表示させるための方法について解説します。

画像を使用して説明しているので分かりやすくなっています。

1分もあれば設定することができるほど簡単なのでぜひやってみてください。

MathJaxを使い「数式を綺麗に見せる」ための準備

MathJaxとは、ブログ, サイト等で数式を綺麗に見せるためのツールです。

ブログに綺麗な数式を表示させるのは結構簡単で、

以下のコードを所定の場所に挿入するだけです。


<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript" defer="">
	MathJax.Hub.Config({
    	tex2jax:{
        	inlineMath:[['$','$'],['\\(','\\)']],
        	displayMath:[['$$','$$'],['\\[','\\]']],
        	processEscapes:true,
    	},
		CommonHTML:{
			undefinedFamily:"serif",
		},
		SVG:{
			undefinedFamily:"serif",
		},
	});
</script>

所定の場所とはどこなのか?

「外観」→「テーマエディター」→「tmp-user」→「head-insert.php」

と行って、head-insert.php 内にコードを挿入します。

ブログ主の画像

音色に泣け

ここまでの説明は、ほんとざっくりした説明です。以下で画像を使ってもう少し詳しく解説します。

まず「外観」をクリックして、その後「テーマエディター」をクリックします。

外観、テーマエディターの順に押す

次に右側にある「temp-user」をクリックします。

そうするとドロップダウンするので、その中にある「head-insert.php」をクリックします。

tmp-user、head-insert.phpの順に押す

次に下に示した矢印の位置に、最初に提示したコードを挿入します。

コードの挿入場所は一個目の ?> の次の段のところ

挿入できたら、左下にある「ファイルを更新」をクリックします。

コードを挿入できたらファイルを更新を押す

以上で数式を綺麗に見せる設定はお終いです。

これでMathJax(数式を綺麗に見せるためのツール)を使うことができます。

MathJaxの使い方の基礎の基礎

MathJaxの導入は、前章で紹介したコードを所定の場所に挿入した時点で終了しています。

ブログ主の画像

音色に泣け

MathJaxの使い方は、綺麗に見せたい数式の部分を、「\$ 数式 \$」といった感じに \$ で囲うとできます。

使い方の例

「\$\frac{4}{5}+3\$」と書くと以下のように表示されます。

$\frac{4}{5}+3$

※ \frac{}{}は、分数を表すMathJaxのコマンドの1つです。

ここまでがMathJaxの基礎の基礎についてでした。

後は使って慣れていく感じです。

その上で自分がよく使っているサイトを最後に紹介したいと思います。

コマンド一覧がめちゃくちゃ見やすく載っているのでお勧めです。

最後までお読みいただきありがとうございました。

ロゴ
タイトルとURLをコピーしました