先回のTinyMCE Advancedプラグインの場合は、WordPressの表（テーブル）を追加するのは簡単でしたが、スタイルシートを適用するの結構面倒でした。表の追加方法が特徴的ですが、JP Markdownプラグインの場合には結構簡単にスタイルシートの適用が出来ました。
プラグインのインストール
プラグインの新規追加から、「JP Markdown」をインストールします。設定などは特にないので、有効化した後にすぐに使えます。
表（テーブル）の追加
JP Markdownの場合、テーブルの追加がビジュアル的ではありません。表を挿入したい部分に次のようにショートカット的な文字列を埋め込みます。
レベル|攻撃力|属性|素材|お金 --|--|--|--|-- 1|+4|500|○○の鱗x1|1000Gz 2|+4|510|○○の皮x2|3000Gz 3|+4|520|○○の殻x10|7000Gz
この書き方で投稿すると、プレビュー時にHTMLに変換されます。こんな感じです。
<table> <thead> <tr> <th>レベル</th> <th>攻撃力</th> <th>属性</th> <th>素材</th> <th>お金</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>+4</td> <td>500</td> <td>○○の鱗x1</td> <td>1000Gz</td> </tr> <tr> <td>2</td> <td>+4</td> <td>510</td> <td>○○の皮x2</td> <td>3000Gz</td> </tr> <tr> <td>3</td> <td>+4</td> <td>520</td> <td>○○の殻x10</td> <td>7000Gz</td> </tr> </tbody> </table>
実際にブラウザには、表組みになって表示されます。
スタイルの変更
この状態で、スタイルの適用を行います。WordPressの［外観｜テーマの編集］メニューでstyle.cssを編集します。
.entry-content th {
background-color:#009900;
color:#ffffff;
padding-left:0.5rem;
}
.entry-content td {
padding-left:0.5rem;
}
.entry-content tbody tr:nth-child(2n+1) {
background-color:#eeeeee;
}
.entry-content tbody tr:nth-child(2n+0) {
background-color:#ccffcc;
}
スタイルシートが適用された表組みはこんな感じで表示されます。
CSSの内容は、極力簡単に記載していますが、分からない場合には別途調べてください。
TinyMCE Advancedプラグインのようにビジュアル的にテーブル表を操作はできませんが、スタイルは既定でも結構カッコ良いスタイルで表示されるので自分の好みでCSSを編集させてWordPressのテーマにあったテーブルを表示したい場合には重宝するプラグインです。
スポンサーリンク
最後までご覧いただき、ありがとうございました。
