<景品表示法に基づく表記>本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

ビジネス

WordPressで長い数式が見切れるのを自動化しつつ直す方法【WordPress & MathJax-LaTeX & Code Snippets 】

ども、所長です!

このサイトでもアラサー高校物理を更新したいと思っていましたが、MathJax-LaTeXというプラグインを用いて数式を表現するだけでは、

スマホで表示したときに長い数式が見切れてしまう

という問題点がありました。

ど素人ながら、今回それを解消できたので、その方法をこちらに残しておこうと思います。

もともとの状況

もともとはこちらの記事で紹介していたように数式が見切れてしまう問題がありました。

>>【WordPressでの数式の導入に一苦労】【YouTubeで使える参考書として売り出す】~8/25進捗報告

そのときの状況はこんな感じ。

  1. このブログはWordpressを使って作っていまして、
  2. 数式の表示にはMathJax-LaTeXというプラグインを用いています。
  3. 長い数式は
    \begin{align}~~\end{align}
    で書くのが私のスタイルです。

この状況を改善するために参考にさせていただいたのは「楽しいブログ」さんのこちらの記事です。

>>WordPressで数式を表示しよう(MathJax)

結局私がどのように解決したかをお伝えします。

長い数式を自動で横スクロールできるようにするための処置

手順は要約すると以下の通りです。

  1. Code Snippetsというプラグインをインストール&有効化する
  2. 「Add New」を選び、以下で紹介するコードを張り付けて有効化する

Code Snippets をインストール

まずこのCode Snippetsをインストールして有効化します。

Add New を選んでコードを張り付ける

このAdd Newの所を選んで、そしたらこんな感じになります。

 

 

ここに適当にタイトルを付けて以下のコードを張り付けたら完成です。

 

貼り付けたコードはこれです。

function change_math_into_div($text){
$replace = array(
//’変更前’ => ‘変更後’,

\begin{align}’ => ‘<div style=”overflow-x: auto;”>
\begin{align}’,
‘\end{align}
’ => ‘\end{align}
</div>’,
\begin{align*}’ => ‘<div style=”overflow-x: auto;”>
\begin{align*}’,
‘\end{align*}
’ => ‘\end{align*}
</div>’,

);
$text = str_replace(array_keys($replace), $replace, $text);
return $text;
}
add_filter(‘the_content’, ‘change_math_into_div’);

 

もう一度、書いておきますが、こちらの記事を参考にさせていただきました。
ありがとうございました。

>>WordPressで数式を表示しよう(MathJax)

あとは
\begin{align}\end{align}
で書くだけ。

あとは

\begin{align}\end{align}
を使って書くだけです。

もともとは$$を数式の両側に付けて書いてたんですけど、今回の書き換えでそれが不要になってしまいました。

なんででしょう(笑)

この辺がど素人なところです。

この記事が皆さんの参考になったら幸いですが、私は仕組みを全く理解していませんので、上手くいかなかったときは自己責任でお願いします。

それではまた、所長でした!

東大理系攻略法
東大卒の現役塾講師が
東大理系攻略法を
解説したPDF販売中!

中高一貫校に行かなくても、塾に行かなくても、独学で受かるための勉強法を完全解説!

全科目の参考書
全参考書の使い方
受験までの勉強スケジュール
が全てわかります!

今だけ!100様限定60%OFF!
さらに24時間以内なら返金保証つき!

会員数500万人超の「note」で
無料サンプル公開!

無料サンプル
を見る≫