プラグインを使わずMathJaXで記述した数式をスマホではみ出ないようにする方法【LaTeX】【WordPress】

2020年3月12日WordPress

こんにちは、このめです。

MathJaXで記述した数式がスマホのような小さい画面ではみ出てしまって困った・・・と悩むことありますよね。
人によっては、「面倒だからプラグインで解決した」という方もいらっしゃるかもしれません。

今回は、プラグインを使わずにMathJaXで記述した数式をスマホで横にはみ出さないようにする（横スクロールできるようにする）方法を紹介します。
ちなみに、WordPress以外にも対応しています。

WordPressでプラグインを使わずにMathJaXを導入する方法は以下の記事をご覧ください。

具体的な手順

「プラグインを使わずに」というのがミソですので、先に紹介した記事の要領でMathJaXを導入していることが前提となります。
プラグインによっては、予め横スクロール機能が備わっているものもあるようですが、処理が重くならないかどうかなどが気になるため、プラグインを使わずにやっていきます。

MathJaXが機能しているか確認する

まず、しっかりとMathJaXが機能しているかを確認しましょう。
機能していないようであれば、それはスマホではみ出るはみ出ない以前の問題となります。

CSSに以下のコードを追加

MathJaXが機能していることを確認したら、CSSに以下のコードを追加しましょう。

span.MJXc-display{
	overflow-x: auto;
	overflow-y: hidden;
}

これによって、MathJaXによって数式が表示される場所が横に長くなった場合、横スクロールとなります。

ちなみに、簡単に説明すると
overflow-x: auto は「横に内容が収まりきらない場合は横スクロール」
overflow-y: hidden は「縦のスクロールバーは非表示」
のような意味を持っています。（厳密には違いますが、このような認識で問題ありません。）

確認してみる

CSSを変更したら、確認してみましょう。
はみ出ることなく横スクロールできるようになっていれば完了です！

実際にどのように表示されるのかという一例が気になる方は、こちらからいくつかの記事を見てチェックしてみてください。（「このめのエコノメ」という、私が運営する別サイトになります。）

いかがでしたか？
意外と簡単でしたね！

プラグインでサクッと解決するのも良いですが、サイトの速度的にもセキュリティ的にも、プラグインなしで解決できるに越したことはないと思います。

MathJaXで横にはみ出ないようにしたい方、ぜひ試してみてください！