【超初心者向け】日本語OK!WordPressで数式を書く「Simple Mathjax」

Sponsored Link




こんにちは。WAKAです。

WordPressで数式を書くにはどうしたらいいんだろう?

何かいいプラグインはあるかな?

 

日本語入りで数式を書く。簡単に使えるプラグインは?

 

 

私の希望

 

  • 数式は LaTeX で書きたい
  • 日本語入り数式を書きたい
  • スマホで表示した時、見切れない(この条件のは見つからず…)

 

 

「WordPress LaTex プラグイン」「WordPress 数式 プラグイン」

で検索してみました。

 

出てきたのがこちら。(2017年11月22日現在)

 

 

 

どれを選べばいいんでしょうか???わからない。。

オススメのプラグインはどれだろう。

 

プラグイン比較で参考にさせていただいたブログはこちら→

http://www.hnagata.net/archives/92

 

 

とりあえず、以下を試してみた。

どれも使い方は簡単だった。

 

使い方:[math]〜[/math]「phpBB Style」、$$$$ 「LaTeX Style」、¥]〜¥] 「MathType Style」から選択可能。

結果:インストール後、設定画面が開けず、エラーが出たので却下…。

 

使い方:数式の冒頭に[mathJax]と書いて数式を書くだけ。

結果日本語が使えて便利!

でも長い分数の時、式とイコールの後の結果の文字が重なって変な表示になる。よって使えず。

 

使い方:[latex]〜[/latex]で囲んで数式を書くだけ。

結果:式の中で全角文字が使えない

数式内で全角文字を使いたい時は\mbox{~}を使うらしいけど、なぜかうまく表示されなかった。

私のやり方が悪いだけかもしれない。

 

最終更新日が3年前〜4年前の

は、もう更新されてない…?PHP の推奨動作環境とか大丈夫なのかな?と初心者の私は心配で使わなかった。

 

結果、

に落ち着いた。

 

 

Simple Mathjax のインストールと数式がはみ出さないように設定

 

 

こちらのページを参考にさせていただきました。とてもわかりやすいです。

http://joyplot.com/documents/2016/10/09/wordpress-simple-mathjax/

 

 

<インストール方法>

  1. WordPressのダッシュボードから「プラグイン」→「新規追加」→「Simple Mathjax」を検索
  2. 「Simple Mathjax」が表示されたら、「今すぐインストール」を選択→「有効化」を選択

 

 

<数式のはみ出し防止>

Mathjaxは長い数式を書いた時、デフォルトでは改行せず画面横にはみ出します!

これを防ぐ場合は、以下のようにします。

 

 

Mathjaxは長い数式を書いた時、デフォルトでは改行せず画面横にはみ出します。これを防ぎたい場合は 設定 > Simple Mathjax を開き、Custom mathjax config に改行オプション(linebreaks)を含む以下のコードを書き込みます。

 

MathJax.Hub.Config({
    tex2jax: {
         inlineMath: [['$','$'], ['\\(','\\)']]
    },
    "HTML-CSS": {
         linebreaks: { automatic: true }
    },
    SVG: {
         linebreaks: { automatic: true }
    }
});

 

 

スマホで式が全部表示されない時の解決法

 

 

ブログはスマホで見る人が大半!

スマホでどう見えるか?見切れてないか?スマホビューはとっても大事です!

 

 

数式が長くてスマホだとはみ出す場合の対処法

 

ダッシュボード→外観→追加CSSに以下のコードを記述

/*– 数式が長くてスマホだとはみ出す場合の対処法 –*/
div.horizontal-scroll{
overflow-x: auto;
}

 

式を強制左寄せにする

 

ダッシュボード→外観→追加CSSに以下のコードを記述

/*– 数式を左寄せ –*/
.MathJax_Display {
text-align: left !important;
text-indent: 2em !important;
}

デメリット:左寄せにしても、長い式はスマホだと見切れてしまう…

 

式をスクロールできるようにする

 

テキスト画面で以下のように数式を挟む。

<div class=”horizontal-scroll”>

〜(数式)

</div>

 

デメリット:式を一個一個挟まないといけない。スクロールバーがでない。全体じゃなくて式だけがスクロールできるようになるので、言わないと誰も気づかない…

 

スマホの画面を横にしてもらう

 

画面が縦の時は画面に入りきらず、切れてしまっていた式も、横にすると見えるようになります。

だが非常にカッコ悪い。

 

まとめ

 

  • WordPressで日本語(全角文字)入りの数式を書きたい
  • LaTeX で書きたい

 

オススメのプラグインは?

スマホで切れちゃった時の解消法は?

について書きました。

主婦起業コンサルタント。5歳と2歳、男児二人のママ。「好きな時に、好きな場所で、好きなことをする!」がモットー。仕事と育児をバランス良く楽しみたい!福岡出身、千葉在住。
詳しいプロフィール→こちら☆実施中のサービス内容→こちら☆

Sponsored Link




LINE@を始めました。

サービスの先行案内、子育て、心のことなど配信しています。

友だち追加

友達追加はこちら ↑ をクリック^^!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

主婦起業コンサルタント。5歳と2歳、男児二人のママ。「好きな時に、好きな場所で、好きなことをする!」がモットー。仕事と育児をバランス良く楽しみたい!福岡出身、千葉在住。 詳しいプロフィール→こちら☆実施中のサービス内容→こちら☆