ブログ運営

WordPressで数式をキレイに!MathJaxの使い方【LaTeX】

サンダー
WordPressで分数や数式の表示はどうしていますか?
(分子) / (分母)とか、(分子)÷(分母)とか…
かみなりん
サンダー
テキスト表示だとそうですね。美しく見せるには「MathJax」というプラグインがオススメです。

 

■MathJaxでの数式表示サンプル(RLC回路の微分方程式)

$$ R \cdot i + L \cdot \frac{di}{dt} + \frac{1}{C} \cdot \int i dt = e  \cdots RLC回路の微分方程式 $$

 

サンダー
このように分数や積分はもちろん、日本語もキレイに出力してくれます。

 




MathJaxを使用する

MathJaxはLaTeXでの記述を行います。

LATEX(ラテック、ラテフ)とは、レスリー・ランポートによって開発されたテキストベースの組版処理システムである。

[引用]Wikipedia

LaTeXで記述すると数式をキレイに表せるので、学術論文などではLaTeX形式で記述される事が多いです。

 

MathJaxプラグインのインストール

MathJaxプラグイン

 

 

MathJaxプラグインをインストールします。

ダッシュボードの「プラグイン」→「新規追加」を押し、「プラグインの検索」で「MathJax」を検索します。

上記の「MathJax-LaTeX」が表示されたら、「今すぐインストール」ボタンを押して、インストールを行います。

インストールが完了し、「有効化」のボタンが表示されたら、「有効化」ボタンを押して、プラグインを有効にします。

 

MathJaxプラグインの設定

MathJax設定画面

 

MathJaxプラグインを有効化したら、使用するための設定を行います。

ダッシュボードの「プラグイン」→「インストール済みプラグイン」から「MathJax-LaTeX」を探し、「設定」を押します。

設定画面は変更する必要はなく、デフォルトのままで問題ありません。

「Save Changes」を押して、設定画面を終了します。

 

MathJaxプラグインを記事内で使用する

MathJaxプラグインを使用するためには、[ ]内にmathjaxと記述したショートコードを記載します。

場所はどこでも問題ありませんが、記事の最初に記述する事をオススメします。

 

 

 

MathJaxをinline形式で表示する

MathJaxでのinline表示の説明

 

数式をinline形式で表示する場合は、下記のように「\」+「(」から始めて、「\」+「)」で閉じます。

【記述例】

問題(1)の式は\(y=f(x)\)です。

 

inline形式は、文の途中でも改行せずにそのまま表示する形式です。

HTMLでは、アンカータグなどがinline要素となります。 ⇒ inline要素:サンダーブログはこちら

 

上記の記述例は下記のように表示されます。

【表示例】

問題(1)の式は、\(y=f(x)\)です。

 

MathJaxをblock形式で表示する

MathJaxでblock形式表現

 

数式をblock形式で表示する場合は、「$」マーク2個で開始し、「$」マーク2個で閉じます。

【記述例】

問題(1)\(2x=2\)の答えは
$$ x = 1 $$
です。

 

block形式は、その要素のみで1行使用されます。

HTMLでは、見出しタグなどがblock要素になります。

見出しはblock要素(1行使用)、h5タグ

上記の記述例は下記のように表示されます。

【表示例】

問題(1) \(2x=2\) の答えは

$$ x = 1 $$

です。

 

MathJaxが対応しているLaTeXコマンド一覧

MathJaxはLaTeX形式で記述しますが、全てのLaTeXコマンドには対応していません。

数式を記述する上で、よく使用するコマンドを抜粋してご紹介します。

またコマンドの前後は半角スペースを空けます。

 

演算子、等号、不等号

記号LaTeX表示
+\(+\)
-\(-\)
×\times\(\times\)
÷\div\(\div\)
\cdot\(\cdot\)
==\(=\)
\neq\(\neq\)
\approx\(\approx\)
>>\(>\)
<<\(<\)
\geq\(\geq\) 
\leq\(\leq\)

 

数式

記号LaTex表示
分数\frac{分子}{分母}\(\frac{1}{x}\)
繁分数(分子や分母が分数)\frac{分子}{\frac{分母の分子}{分母の分母}}\(\frac{1}{\frac{1}{R}}\)
絶対値| 中身 |\(|x|\)
二重絶対値\| 中身 \|\(\|v\|\)
分数の絶対値\left| 分数 \right| \(\left| \frac{1}{x} \right| \)
sin x cos x tan x\sin x \cos x \tan x\(\sin x \cos x \tan x\)

 

数式は美しく

サンダー
MathJaxを使って数式より美しく表示させてみてください。

 

created by Rinker
¥3,520 (2024/11/29 13:51:59時点 楽天市場調べ-詳細)







人気の記事

1

サンダー直流(DC)と交流(AC)の違いって分かりますか? かみなりん家庭用のコンセントは交流(AC)だよね。乾電池はなんとなくDC(直流)というイメージです。 サンダー改めて聞かれると、交流と直流の ...

【オペアンプ】 反転増幅回路の回路図アイキャッチ 2

かみなりんオペアンプの反転増幅回路ってどういう特徴があるの? サンダー反転増幅回路は文字通り、入力電圧の符号を反転、増幅する回路になります。 かみなりん反転して、増幅するから反転増幅回路なんだね。じゃ ...

アノードコモンとカソードコモン 3

サンダー「アノードコモン」と「カソードコモン」の違い分かりますか? かみなりんえーっと、アノードがプラス側、カソードがマイナス側で・・・コモンってなんだっけ? サンダー改めて聞かれると、どっちがどうだ ...

4

かみなりんアフィリエイトで成果が発生しない!? という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget= ...

旅行やアルバイト等の 紹介にバリューコマースの『MyLinkBox』が超便利!! 5

サンダーバリューコマースから2019年6月5日に『MyLinkBox』がリリースされました! かみなりんその『MyLinkBox』ってなに? サンダー『カエレバ』や『Rinker』はご存知でしょうか? ...

miMind使いかたアイキャッチ 6

サンダーマインドマップはご存知ですか?   放射状に枝が伸びていくアレですよね?   頭の整理をするのに良く使います   私もよく情報を整理するためにマインドマップを作成 ...

Web(ウェブ)開発の学習にオススメなUdemyコース3選 7

サンダー世界最大級のオンライン学習プラットフォームの【Udemy】はご存知ですか? アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPyth ...

ブレッドボード の使い方のアイキャッチ 8

サンダーブレッドボードって知ってる? かみなりん電子工作でハンダ付けせずに、手軽に電子回路が組めるボードだよね? サンダーそう、今回はそのブレッドボードの使い方を紹介します。ブレッドボードを使ってLE ...

箇条書きタグ自動追加ツール 9

【このツールの目的】 箇条書きタグ(ulタグもしくはolタグ)を自動で追加するツールです。 listタグも自動で追加します。 【箇条書きの種類選択】 数字無し箇条書き(ul) ・箇条書き数字有り箇条書 ...

LED抵抗計算機 10

LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。   LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...

-ブログ運営
-, , ,