はじめに
こんにちは、こうへいです。ガジェットの紹介ページを作成していたところ、WordPressではデフォルトで数式の作成ができないことがわかりました。また、コードやテーブルの表示が質素で機能が足りません。今後、数式やコード、テーブルの表示は重要となるため、立派な見た目になるよう設定していきます。
数式エディタ
いろいろな数式プラグインがあるみたいですが、表示が最も綺麗だと感じたSimple Mathjaxを使用したいと思います。ブログ内でドルマーク$を表示したい時にエスケープが必要らしいですが、そんなに使う機会もないので良しとします。
数式プラグインの導入
WordPress画面からプラグイン→新規追加まで移動し、Simple Mathjaxで検索してインストール＆有効化します。設定は特にありません。
使い方
使い方は2通りあり、数式を文章中に埋め込む方法と、単独で中央表示させる方法です。
数式を文章中に埋め込みたい場合、ドルマーク（$）1つで数式をはさみます。段落ブロックの中に「数式は\$y=2x\$です。」のように記述すると、以下のような表示になります。
数式は$y=2x$です。
数式を単独で中央表示させたい場合、ドルマーク（$）2つで数式をはさみます。段落ブロックの中に「\$\$y=2x\$\$」のように記述すると、以下のような表示になります。
$$y=2x$$
以下、よく使いそうな数式コマンドの一覧です。
| 記述 | 表示 | 記述 | 表示 |
|---|---|---|---|
| \$\$\frac{2}{3}\$\$ | $$\frac{2}{3}$$ | \$\$\sqrt{x}\$\$ | $$\sqrt{x}$$ |
| \$\$x^{-3}\$\$ | $$x^{-3}$$ | \$\$\sin 45^\circ\$\$ | $$\sin 45^\circ$$ |
| \$\$x_{12}\$\$ | $$x_{12}$$ | \$\$\alpha\$\$ | $$\alpha$$ |
| \$\$\\begin{bmatrix} a & b \\\ c & d \end{bmatrix}\$\$ | $$\begin{bmatrix} a & b \\ c & d \end{bmatrix}$$ |
使用上の注意
綺麗な数式表示ができるSimple Mathjaxですが、注意する点が1つだけあります。ブログ中でドルマーク（\$）を利用するときに数式だとみなされてしまうため、\\$と記述する必要があります。
長い数式の表示
以下のように数式が長くなってしまったとき、サイトの右側にはみ出してしまう問題があります。
$$a=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40]$$
このときの対処法として、CSSで横スクロール用クラスを作成します。WordPress画面から外観→テーマファイルエディターまで移動し、Cocoon Child/style.cssを開きます。
/*はみ出さないように横スクロール*/
.scroll{
overflow-x: auto;
overflow-y: hidden;
}上記のコードを追加し、横スクロールさせたいブロックの高度な設定/追加CSSクラスにscrollと入力すると、以下のように該当のブロックが横スクロール可能となります。
$$a=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40]$$
コード表示
WordPressのデフォルトのコードブロックだと、シンタックスハイライトなしで行数も表示されず、カスタマイズしづらいため、とても使いづらいものとなっています。そこで、Highlighting Code Blockというプラグインを利用します。
コード表示プラグインの導入
WordPress画面からプラグイン→新規追加まで移動し、Highlighting Code Blockで検索してインストール＆有効化します。
設定
WordPress画面から設定→[HCB設定]まで移動し、以下を設定します。
- コードカラーリング（フロント側） ： Dark
- コードカラーリング（エディター側） ： Dark
- コピーボタン ： 表示しない
使い方
プラグインを有効化すると、WordPressの記事編集画面でHighlighting Code Blockというブロックが選択できるようになります。こちらを選択してコードを書き込み、下の – Lang Select – の欄に書き込んだ言語を選択し、ファイル名を書き込むと、以下のように表示されます。
#include <stdio.h>
int main() {
printf("Hello World");
return 0;
}テーブル表示
WordPressのデフォルトのテーブルブロックだと、行の結合ができないためとても使いづらいものとなっています。そこで、Flexible Table Blockというプラグインを利用します。
コード表示プラグインの導入
WordPress画面からプラグイン→新規追加まで移動し、Flexible Table Blockで検索してインストール＆有効化します。
設定
プラグインを有効化すると、WordPressの記事編集画面でFlexible Tableというブロックが選択できるようになります。まずはデフォルトスタイルを設定するために、Flexible Tableを選択してカラム数、行数を設定して表を作成し、右側のグローバル設定から以下を設定します。
- デフォルトスタイル ： ストライプ
- ストライプスタイルの背景色 (奇数行) ： #ffefe6
- ストライプスタイルの背景色 (偶数行) ： #ffd1b3
- セル→セルの背景色 (thタグ) ： リセット
- セル→セルの背景色 (tdタグ) ： リセット
- セル→セルのボーダー幅 ： 2px
- セル→セルのテキスト配置 ： 中央
使い方
以下の手順に従って表を作成します。
- Flexible Tableを選択してカラム数、行数、ヘッダを設定して表を作成します。
- 右側のテーブル設定からテーブルの横幅をautoに設定します。
- ポップアップのテーブル配置の変更からテーブルを中央揃えを設定します。
- ヘッダ行を選択して、右側の複数セル設定からセルの背景色に#ff9244を設定します。
| ヘッダ1 | ヘッダ2 | ヘッダ3 |
|---|---|---|
| a | d | g |
| b | e | h |
| c | f | e |
コメント