数式を美しく見せたいけどやり方がわからないとの要望を多く受けましたので、まとめ記事を作成いたしました。
サンプル
こんな感じで数式を表示させることができます。専門知識はほとんどいらないです！
`X ＝ 1000(f/\sigma)`
こちらの学術サイトも運営しているのですが、数式をキレイに表示させることができるとそれだけで結構な満足感があります。
https://www.sound-mania.xyz/171/
www.sound-mania.xyz
数式生成の概要 ～コード理解～
hostmath.comでサイト下部のShow Embeded Codeをクリック。すると、ページ下部にタブが出現し、そのタブの中に数式コードが出現します。
この数式コードをWordpressのブロックエディター『カスタムHTML』の中に入れ込めば、記事内に数式を表示させることができます。
複数の場所に数式を表示させる場合、<script>～</script>は記事内に一つだけあれば大丈夫です。すべての数式に<script>タブを添えても大きな問題にはなりませんが、コードが冗長になり、読み込み速度が落ちるかもしれないのです。
ちなみに、<script>タブ内のコードの意味は、『HostMath.comを読み込みます』と宣言しているだけです。
数式の見栄え設定 ～CSS～
WordPress上で数式を表示させる場合、以下のCSSをサイト全体に反映させてあげると見栄えが良くなります。管理画面のカスタマイズ ＞ 追加CSSにコピペしてください。
.MathJax_Display {
text-align: left !important;
margin-left: 80px !important;
overflow-x: scroll !important;
overflow-y: hidden !important;
}
/*絶対値記号を記述するため*/
.math{
margin-left: 80px;
overflow-x: scroll !important;
}
Copy
実際に１から数式を表示させてみる
Header and Footer Scripts
<!-- HostMathの読み込み -->
<!-- 記事の一番上に「カスタムHTML」で挿入 -->
<script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK"></script><!-- HostMathで生成された数式コード -->
\[Z=Z_{c}\coth(\gamma d)\]コードサンプル（MathJax）
| コード | 内容 |
|---|---|
| \\ | 改行 |
 | テーブル |
| \text{テキスト} | テキスト化 |
| \text{ } | スペース*（{}内にスペースを入力） |
| \leftline{テキスト} | 左寄せ |
| \centerline{テキスト} | 中央寄せ |
| \rightline{テキスト} | 右寄せ |
おまけ 絶対値の表示
絶対値記号をきれいに表記したい場合は、ASCIIMathMLでの記述と以下のコードのように<div>で数式コードを囲う必要があります。hostmath.comで『A』のアイコンを押すと、 ASCIIMathML modeになります。絶対値記号をつけたい文字列の前に『abs』と記述してみてください。
<div class="math"> こちらにコード（ASCllMath）を入力 </div>
Copy
コメント