Bloggerで数式の表示がはみ出さないように修正する

2022/09/25

Blogger

 現在このブログでは下記サイトを参考にLatexで数式をかけるようにしております。

Bloggerで行うLatex(導入から式の書き方)

その際に気になる点として、下記のように数式が画面幅を超えて表示されてしまいます。

PCのような大画面で見ている時はあまり気にならないのですが、スマホやタブレッドのような小さな画面で見るとかなり違和感があるため、修正していきたいと思います。

divタグにクラスを追加してAutoscrollを適用する

最近HTMLを勉強中なので、タグにクラスを付けることでCSSで簡単に装飾をすることができると分かりました。今回は学んだことを活かしてdivタグにクラスを付与してCSSで装飾するようにします。

今回追加したスクロールさせるCSS

今回追加したCSSは下記のとおりです。
/*[START]texで書いた数式が画面からはみ出した場合にスクロールさせる*/
div.tex{
overflow-x: auto;
}
/*[END]texで書いた数式が画面からはみ出した場合にスクロールさせる*/

簡単に説明するとdivタグにtexというクラスを指定した場合に画面からはみ出した際スクロールバーを表示するようにしています。詳しい使い方は次で紹介します。

今回div.texという要素を特定したクラスセレクタで指定しています。divタグ以外の全texクラスに適用したいというひとはdiv.texとなっている個所を.texに変更してください。

(参考)スタイルの優先順位

使いかた

使い方は簡単で、数式を下記divタグで挟みます。
<div class = "tex">入力したい数式</div>
もう少し具体的に記述すると、先ほどのはみ出してしまった数式は下記のようにします。(HTMLのコードを直接コピペしているため、改行されておらず見づらいくなっております。。。)
<div class="tex">\begin{equation}\begin{bmatrix}1 &amp; 0 &amp; 0 \\&nbsp; 0 &amp; \cos\varphi&nbsp;&amp; \sin\varphi&nbsp;\\ 0&nbsp;&amp; -\sin\varphi&amp; \cos \varphi\end{bmatrix}\begin{bmatrix}\cos\theta&nbsp;&amp; 0 &amp; -\sin\theta \\&nbsp; 0 &amp; 1 &amp; 0 \\ \sin\theta &amp; 0 &amp; \cos \theta\end{bmatrix}&nbsp; \begin{bmatrix}\cos\psi&nbsp;&amp; \sin\psi&nbsp;&amp; 0\\ -\sin\psi&nbsp;&amp; \cos \psi &amp; 0 \\ 0 &amp; 0 &amp; 1\end{bmatrix}\begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix} = \begin{bmatrix}a_x\\ a_y \\a_z\end{bmatrix}\end{equation}</div>

実行結果

先ほどのコードを追加して表示した結果、下記のように画面枠からはみ出す場合はスクロールバーが表示されるようになりました。これでスマホなどでも問題なく数式を見ることができるようになったと思います。


まとめ

今回はCSSでtexクラスの装飾を追加し、数式が画面からはみ出した場合に画面内に収まるようにスクロールバーが表示されるように変更しました。

まだ全部の記事に今回のdivタグ挿入作業が終わっていないため、随時変更を適用していこうと思います。もし、数式が画面からはみ出しているような記事がありましたらコメントにて残していただけると幸いです。

自己紹介

はじめまして 社会人になってからバイクやプログラミングなどを始めました。 プログラミングや整備の記事を書いていますが、独学なので間違った情報が多いかもしれません。 間違っている情報や改善点がありましたらコメントしていただけると幸いです。

X(旧Twitter)

フォローお願いします!

ラベル

QooQ