WordPressへの数式を入れ方~プラグインと注意点-数式の色とスクロール表示

Wordpressへ数式の入れ方プラグインと注意点 数式の色とスクロール表示 ブログ関連
ブログ初心者
ブログに数式を入れようと思うんだけど、キレイに入れる方法はないかなぁ・・・?
はなたか
LaTeXを使ったことはある?プラグインを入れることで、LaTeX形式で記述できるよ。

今回は、数式をWordpressへ入れる方法を解説します。

数式を導入したのは良いものの、携帯で見てみると最後まで表示できていない、などの注意すべき点がありますので、あわせて紹介します。

本記事をおススメする人
  • 技術系のブログを書き始めた方で、数式のデザインにこだわりたい方
  • 数式を入れたけど、スマホで見てみると最後まで表示できなくて困っている方

WordPressへの数式の入れ方

結論としてはプラグインを入れます。

おススメのプラグインは”Simple Mathjax“です。

筆者も使用しています。

他にも同様なプラグインとしてMathjax Latexというものもありますが、こちらでも全然OK。

設定や使用方法はSimple Mathjaxと同じです。

プラグイン設定の仕方

①Wordpressのダッシュボード画面の左側からプラグインを選択します。

②プラグインのリストの中から新規追加を選択します。

③検索Boxの中にSimple Mathjaxと入力

④Simple Mathjaxのプラグインが表れるので、今すぐインストールを選択します。

 しばらく待つと有効化のボタンが出てきますので、有効化を選択してください。

以上で設定終わりです。

LaTexのコマンド

LaTexのコマンド集は下記のサイトを参考にしてください。

筆者もコマンドは全て覚えているわけではありませんので、数式を使いたいときにこのサイトを辞書のように使っています。

Latexコマンド集

Latexコマンド集

簡単な使用例

数式の入れ方

数式を入れるために、Wordpressでどのように記述すればよいか?

『$』の記号を使います。

数式y=xというものがあったとして、『$』の記号で挟みます。

$の個数でも扱いが変わってきまして、1個の『$』で挟んだ場合、

$y=x$

このように、文中に数式をいれることができます。

2個の$$で挟んだ場合、

$$y=x$$

このように、中央に数式を表示することとなります。

分数

よく使う分数の表記は『\frac{分子}{分母}』というコマンドを$記号で挟みます。

『\』はコマンドを使うときに先頭に必要な記号で、非常に忘れやすいので、注意してくださいね。

また、複雑な数式を扱うと、『{ }』の『}』が足りていないことがありますので、これも注意です。

\frac{x}{y}を$$で挟んで、表示してみましょう。

$$\frac{x}{y}$$

これでばっちりです。

注意点

ここでは数式表示で陥りやすいトラブルについて解説します。

数式の色の変更

さきほどの$\frac{x}{y}$という式の色を変えたい!という場合です。

色を変えるコマンドを入れないと変えれません。

具体的には下図のように、お手軽に文字の色を変更できるボタンを使うと・・・

プレビュー画面では、下図のように、数式が表示されません。

やりたいことは、そういうことじゃないんだ…(泣)

こういう場合、\color{色}{変えたい文字}というコマンドを使います。

\color{red}{\frac{x}{y}}を$$で挟みますと、

$$\color{red}{\frac{x}{y}}$$

と赤色で表示できます。

少し面倒ですが、このコマンドで色を変えるようにしましょう。

赤ならred、青ならblue、緑ならgreenと色の部分に入れることで、色を変更できます。

それぞれの色について、下記にリストを付けていますので参考にしてくださいね。

コマンド 見た目
red $\color{red}{はなたか}$
blue $\color{blue}{はなたか}$
green $\color{green}{はなたか}$
水色 cyan $\color{cyan}{はなたか}$
黄色 yellow $\color{yellow}{はなたか}$
ピンク magenta $\color{magenta}{はなたか}$
white $\color{white}{はなたか}$

数式が長くて表示されない

これはスマホなどで表示してみるとわかりますが、長い数式はスマホでは端が切れてしまいます。

試しに適当に長めの数式を下に出力しますね。

$$y=sinx+cosx+e^x+x^3+x^2+x+1+logx+\frac{1}{x^2}+\frac{1}{x^3}+\frac{1}{x^4}+\frac{1}{x^5}+z$$

パソコン画面だと、見れていると思いますが、スマホだと最後の$+z$まで見れないのではないでしょうか?

解決策としては、スクロール表示できるようにするか、数式の途中で改行するか、です。

数式を途中で改行するのはおススメできません。

スマホによって表示幅は違いますし、区切る位置を判別するのが非常に難しいです。

スクロール表示させる方が読者にやさしい記事になります。

先ほどの式をスクロール表示できるようにすると、下記のようになります。

$$y=sinx+cosx+e^x+x^3+x^2+x+1+logx+\frac{1}{x^2}+\frac{1}{x^3}+\frac{1}{x^4}+\frac{1}{x^5}+z$$

数式をタップすると、バーが出てきてスクロールできるようになっていると思います。

このやり方を解説しますね。

スクロール表示のやり方

追加CSSにコードを追加します。

ダッシュボード画面の左側のリストから、外観を選択し、カスタマイズを選択してください。

カスタマイズの画面になりますので、下の方にある、追加CSSを選択しましょう。

追加CSSで、コードを入力する画面になりますので、下記コードを入れるます。

追加CSSのコード

div.scroll{
overflow-x:auto;
overflow-y:hidden;
}

あとは投稿の編集画面で数式を下記のように、挟みこみます。

<div class=”scroll”>
(数式)
</div>

これで数式をスクロールできます。

スクロール表示について、もっと詳細を変えたい人は参考サイトを参考にしてください。

AddQuickTagと併用

ブログ初心者
毎回、このコマンド入れるの面倒なんですけど・・・
はなたか
こういうコマンドはAddQuickTagで設定しておくと楽になるよ。

AddQuickTagというプラグインを入れて、登録することで作業性があがります。

Simple Mathjaxのプラグインをインストールしたときと同じように、プラグインをインストール、有効化しましょう。

AddQuickTagと検索の部分に入力して、インストール、有効化しましょう。

設定に入ります。

インストール済みプラグインからAddQuickTagを探して、設定を押します。

設定画面が開きますので、下図のように設定をしてください。

必ず、変更を保存して、設定を終了しましょう。

あとは投稿編集の画面で、下のように長い数式を選択して、スクロール表示のタグを使いましょう。

これで、スクロール表示できます。

今回Classic Editorで説明しましたが、基本的にはGutenbergのエディターでもやり方は同じです。

AddQuickTagのコマンドをスクロールさせたい数式に適用するだけです。

プラグインを使わない状態と比較

言わずもがなかもしれませんが、見た目が全然違います。

  • プラグイン無し:dy/dx=f'(x)
  • プラグイン有り:$\frac{dy}{dx}=f'(x)$

数式が見にくい形で書いていると、それだけでむずかしい・・・

いつも自分が使っている形に脳内変換しないといけませんが、そんなところに脳のメモリーを使いたくありません。

ブログとして、読者にわかりやすい情報を提供したい、というのであれば、是非わかりやすいデザインを使ってください。

まとめ

WordPressへ数式を入れるやり方を解説しました。

Wordpressへの数式の入れ方

プラグインのSimple MathjaxやMathjax LaTeXをインストール、有効化します。

編集画面でLaTeXのコマンドに従って数式を入力しましょう。

注意点として、数式の色を変えるときは\color{}{}のコマンドで変更すること、

長い数式の場合は、スクロール表示させるように追加CSSの設定をしておくことです。

スクロール表示はAddQuickTagのプラグインを併用することで、作業性が格段にUpします。

数式を入れるときは、これらのプラグインを使って、わかりやすい記事を書くように心がけてくださいね。