今回は、WordPressで数式を書くためのプラグインの1つ「Simple MathJax」で、長めの数式をスクロールさせる方法について解説します！
はじめに
WordPressで、プラグイン「Simple MathJax」を使って数式を書こうとしたとき、こんなことを思ったことはありませんか？
- 長めの数式を書きたいけど、画面からはみ出るのでスクロールさせたい
私もしばらく方法がわからず悩んでいたのですが、ようやく解決したので、同じ悩みをもつあなたにも試してほしいと思います！
本記事の方法ではCSSにコードを書き込みます。
「バックアップを作成する」「子テーマを使用する」など、万一の場合に備えた対策をとっておくことを強くお勧めします。
完成イメージ
まずはこの記事で何をしようとしているのかを、お見せしますね。
$$\prod_{ k = 1 }^{20} k = 1 \times 2 \times 3 \times 4 \times 5 \times 6 \times 7 \times 8 \times 9 \times 10 \times 11 \times 12 \times 13 \times 14 \times 15 \times 16 \times 17 \times 18 \times 19 \times 20 = 2432902008176640000$$
どうでしょう？長い数式でもスクロールさせることで、最後まで見えるようになっています。
では続いて、この「完成イメージ」をつくる方法について、解説していきます！
数式をスクロールさせる方法
「スクロールできる数式」をつくる手順は、以下のとおりです。
- CSSをコピー
- 数式を作成
- 「追加CSSクラス」に書き込む
順番に分かりやすく解説していきますね！
CSSをコピー
まずは、次のCSSをコピーしてください。
（コードエリアの右上に「Copy」ボタンがあります。）
/* 長い数式をスクロール */
.scroll{
overflow-x: auto;
overflow-y: hidden;
}.scroll{
overflow-x: auto;
overflow-y: hidden;
}コピーしたCSSを、次の2つの場所のどちらかに貼り付けます。
子テーマのスタイルシート（style.css）
- 「外観」>「テーマファイルエディター」と進む。
- 子テーマ（私の場合、jin-child）のスタイルシート（style.css）に貼り付ける。
- 「ファイルの更新」をクリック。
追加CSS
- 「外観」>「カスタマイズ」>「追加CSS」と進み、貼り付ける。
- 「公開」をクリック。
なお、「追加CSS」ではコメントアウトが使えませんので、上の「コメントなしのコードはこちら」をご利用ください。
数式を作成
数式を作成していきます。
この記事の本質的な部分ではないので、サラッと説明しますが、次の2つの方法で数式を書くことができます。
ディスプレイスタイル
$数式$このスタイルでは、数式が独立した1行の中に表示されます。
オイラーの等式は$e^{i \pi}+1 = 0$です。オイラーの等式は$$e^{i \pi}+1 = 0$$です。
インラインスタイル
$数式$このスタイルでは、数式が文中に表示されます。
オイラーの等式は$e^{i \pi}+1 = 0$です。オイラーの等式は$e^{i \pi}+1 = 0$です。
文章の流れや読みやすさを意識して、2つのスタイルを使い分けましょう。
MathJax（LaTeX）で数式を書くコマンドについては Easy Copy MathJax（なかけん88様）が大変参考になります。
「追加CSSクラス」に書き込む
数式が作成できたら、右欄「ブロック」の一番下の「高度な設定」の中にある「追加CSSクラス」に、次の文字列をコピーして貼り付けましょう。
.scroll以上で完成です、お疲れ様でした！
保存をして、「プレビュー」や「投稿を表示」から出来栄えを見てみましょう！
まとめ
今回は、Simple MathJaxで長めの数式を書いたとき、スクロールさせる方法について解説しました。
読者にとっては、一度で全ての数式が見られるのが理想ですが、中にはホントに長い数式もあるので悩ましいですよね。
数式中でも適切に改行して、それでもどうしようもない時にこの方法を試してみてください！
良い「数式ライフ」を！
＼ 実際にこの記事で「スクロールできる数式」を載せてるよ ／
