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