MathJaxを使ってライブドアブログに数式(LaTex)を表示する

ライブドアブログ(Livedoor Blog)はLaTex形式に対応していないので、デフォルトの設定では数式を表記することができません。そこで、「MathJax」という外部ライブラリを読み込み、LaTex形式で書かれた数式を表示できるようにしてみました。

MathJaxは、LaTexなどで書かれた数式をウェブブラウザ上で表示するためのJavaScriptライブラリです。以下のウェブサイトに詳しい使い方が書かれています。

MathJaxの使い方

HTMLの中にMathJaxを使うための設定を書き込み、その中でLaTeXのコマンドで数式を記述すると、そのHTMLファイルをブラウザで見たときにLaTeXのコマンドで書かれた部分が自動的にきれいな数式に置き換わる。ブラウザ側の設定は何も必要ない。

PC版テンプレートでのMathJaxの読み込み設定

ライブドアブログのダッシュボード(マイページ)から、ブログ設定 > デザイン設定(PC) > カスタマイズと進み、ブログを表示する際に読み込まれるHTMLファイルのテンプレートを編集します。

編集が必要なのは、「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の4個のファイルです。これらのファイルのヘッダ(”head”タグで囲まれた部分)内でスクリプトを読み込むようにします。ヘッダ内で読み込むスクリプトについては「MathJaxの使い方」を参照してください。

LivedoorブログにMathJaxを表示

スクリプトが読み込まれていれば、ブログ記事内のLaTex記法で書かれた数式がきちんと表示されるはずです。

ただし、スマートフォンからだと数式が表示されません。画面の一番下までスクロールして、「表示切替」から「パソコン」に変更する必要があります。

スマートフォン版テンプレートではMathJaxを読み込みできない

上記の方法によってPCからブログを閲覧する分には数式を表示できるようになったと思います。しかしながら、スマートフォン(およびガラケー)からの閲覧で読み込まれるテンプレートがPC版と異なるため、スマホではうまく数式が表示されません(生のLaTex文が表示される)。

ライブドアブログでは、PC版のテンプレートはある程度自由にカスタマイズできるので問題ありません。しかしながら、スマートフォン版のカスタマイズは厳しく制限されているため、ここに書いた方法ではスマートフォンからブログを読んだ時に数式を表示することはできません。

現状、スマートフォンから閲覧された際、読者にPC用の表示への切り替えを促すぐらいしか対策が思いつきません。何か良い方法はないでしょうか…?

シェアしてもらえるとうれしいです。゚(´っωc`)゚。