はてなでtex書いている人たちへ…数式が長くてスマホだとはみ出るときの対処法

はてなでtex駆使して数式書いている人って素敵ですよねー…。
はい、つまり僕も素敵です。

ちなみに僕はmathjaxというのを使っています。headタグにjavascriptの読み込みコードを挿入するだけなので非常に簡単です。

今回は小ネタとして、はてなでtexを書いていて困ったことがあったのでその対処法を共有します。

数式が長いと……

はてなでブログ書いている方は、きっとパソコンで執筆していることが多いでしょう！
パソコンの画面上でプレビューを見ながら変なところが無いか確認していても、スマホだと表示が崩れていることがあります。

最近気づいたのですが、はてなでtexコードを書いていて長い数式になった場合、スマホなど画面の横幅が狭い端末だとうまく表示されないケースがあります。

以下のように、途中で切れてしまうのです……。右側が見れない……。厄介だぜ！

cssを調整

そんな時はcssを調整して該当部分だけ横スクロールできるように設定しましょう。

手順はかなり簡単です！
ブログの設定画面から「デザイン」を選択してください。そこから更に「デザインcss」を選択し、cssを編集します。

以下のcssを追加してください。（上のスクショはすでに追加されている状態です。）

div.horizontal-scroll{
overflow-x: auto;
}

css追加後、数式が長くて切れてしまいそうな箇所を以下のようにclassを指定したdivタグで挟み込みましょう！

<div class="horizontal-scroll">
なんかしら数式
</div>

こうすることで、画面が狭くなった場合に横スクロールが登場します！はい便利！拍手お願いします！

スクロールの例です。パソコンの方はブラウザの幅を狭くしてみて試してみてください！

\begin{eqnarray*}
p(y_A \mid \lambda_A) &=& \frac{\lambda_A^{y_A} exp(-\lambda_A)}{(y_A)!}\\
&=& \frac{(exp(a + b x_A))^{y_A} exp(-(exp(a + b x_A))}{y_A!}
\end{eqnarray*}

なお上のコードは編集画面上では以下のように書いています。

<div class="horizontal-scroll">
\begin{eqnarray*}
p(y_A \mid \lambda_A) &=& \frac{\lambda_A^{y_A} exp(-\lambda_A)}{(y_A)!}\\
&=& \frac{(exp(a + b x_A))^{y_A} exp(-(exp(a + b x_A))}{y_A!}
\end{eqnarray*}
</div>

最後に

この横スクロールをさせるcssは、texコードを使いたいとき以外にも当然使えるので、機会があれば使ってみてください！

あと、cssまわりはそこまで知識が無いので、もっと良いやり方あったら是非教えてくださいー。
もし役に立ったらコメントなりスターなりもらえると嬉しいです！