【導入】サイトにhtmlできれいな数式表現をする|作業時間は1分で終わる

ブログ

サイトで数式を使用する

サイトで数式を使う前に用意しなければいけないものがあるので説明します。まずは下の2つの数式を見てください。

(x²/a²)+(y²/b²)=1

$$\frac{x^2}{a^2}+\frac{y^2}{b^2}=1$$

どちらも楕円の有名な公式ですが、下の方が圧倒的に見やすいですよね。他にももっと複雑になれば、

y={4(e^x+1)cos2x-e^xsin2x}/2(e^x+1)√(e^x+1)

$$y=\frac{4(e^x+1)cos2x-e^xsin2x}{2(e^x+1)\sqrt{e^x+1}}$$

この2つの式も全く同じ式ですが、上の方のように書いたらもう何が何だかわからなくなります。数式を使う場合は下のように書きたい人が多いと思うので、下のように書く書き方を説明していきます。

【本編】数式を使用するためにまずやること

簡単なやり方として2つあります。

  1. サイト内に特定のhtmlコードを挿入する方法
  2. プラグインを使用して行う方法(簡単)

1.サイト内に特定のhtmlを挿入する方法

下のコードを記事の最初に挿入します。


<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

このように挿入したら、htmlで数式を表せるようになります。

ショートコード推奨

先ほどの長いコードですが、自分はプラグインを使用してショートコードで挿入しています。自分の使用しているプラグインと使用方法を紹介します。

shortcoder」です。

wordpress内のプラグインから新規追加で「shortcoder」で調べれば出てきます。有効化できたら次は使い方を見ていきます。


有効化をしたら左側に”shortcoder”と出てくるのでクリックします。


上の方にある”create shortcode”をクリックして編集ページに移ります。


そしたらコードをコピー&ペーストして、ショートコード名を決めます。自分は「mathjax」としてますがなんでも大丈夫です。

ここまでできたら更新を押してください。


左側の”shortcoder”を押せば最初の場所に戻ってきて、「mathjax」が追加されているのが確認できます。

右側にある、がショートコードなのでそれを、入れたいサイトのページの一番上にコピー&ペーストすれば、終わりです。数式を使用できるようになります。


2. プラグインを使用して行う方法

これはさっきのとは違い毎回毎回コードを入れるものではなく、プラグインでサイト全体に数式を使えるようにする方法です。


プラグインの”新規追加”をクリックします。


”simple mathjax”で調べて、紫のアイコンのやつ(緑色の枠で囲っているやつ)をダウンロードして、有効化します。

これで数式を使えるようになります。(こっちの方が簡単かも・・・)

htmlコードとプラグインの比較

最初に数式をサイト内で左寄せした場合を見ていきます。

ほとんど差がありませんね。

細かく言うと2つ目の式なんかでは、分数の真ん中にある線と上下の数式の距離に違いがあったりしますが、無視できるレベルです。


次は、サイトの真ん中に数式を寄せた場合です。

真ん中に寄せると「htmlコード」の方のルートの上の線が太くなります。

上のは画像ですが、実際に編集していると意外と気づきました。ただ、訪問者は気にしない程度のものなので無視してもいいと思います。

htmlコードのメリットとデメリット

メリット

不備があってもすべてのサイトの数式がダメになるわけではないので修正が楽。

デメリット

毎回毎回、htmlコードを挿入しなければならない。

simple mathjax(プラグイン)のメリットとデメリット

メリット

毎回毎回、何かをすることはなく全部のページに有効であること。

デメリット

プラグインに不備があったらすべてのページを修正しなければいけなくなる。


どっちの方が使いやすいとか、綺麗になるとかはないので、どっちでも好きな方でいいと思います。

数式の使用の超基本

$$\frac{x^2}{a^2}+\frac{y^2}{b^2}=1$$

これならこうなっています。

$$\frac{x^2}{a^2}+\frac{y^2}{b^2}=1$$

重要なのは、数式の前後についている”$$”です。数式を表現するには、前後何かしらを付けこれから数式を書きますという標識にしなければいけません。

5+3=8

5+3=8
$$5+3=8$$
$$5+3=8$$

こんなに簡単な式でも”$$”がついているのとついていないのではだいぶ違いが出ます。

“$$”以外には”$”のみでも数式を表現できます。ただ少し場所が変わり、左寄せになります。

$\frac{x^2}{a^2}+\frac{y^2}{b^2}=1$
$\frac{x^2}{a^2}+\frac{y^2}{b^2}=1$

もっと詳しい数式の表し方は別ページで紹介しますが、私が現在よく使用しているいろいろな数式を表すための一覧表のURLを貼っておきます。

【MathJax・LaTeX】数式の使い方とコマンド一覧!
MathJaxとはMathJaxはWeb上で数式を表示させるためのオープンソースのJavaScriptライブラリです。LaTeXの数式のコマンドをブラウザ側で表示させることができるためわざわざ他のソフトで数式を作って、それをpngなどの写真

ルートやベクトル、Σ(シグマ)、極限などが載っています。

まとめ

  1. サイト内に特定のhtmlコードを挿入する方法
  2. simple mathjaxを使用して行う方法(簡単)

以上のどちらかを行うことで、数式を表現する基礎を整えることができます。

作業時間は1分で終わると思うのでぜひともやってみてください。

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

ロゴ

コメント

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