[WordPress] JP Markdownで表を簡単に作ることができた

2017/12/29 WordPress

WordPressのテキストエディタで表を作るのは大変

[WordPress]エンティティコード〜テキストエディタでhtmlタグをそのまま表示の記事で覚えておいた方が良いエンティティコードということで下のような表を書きました。

文字 エンティティコード
< &lt;
> &gt;
& &amp;
" &quot;

こんな簡単な表ですが、ｈｔｍｌで書くと下のように面倒くさいんです。

<table>
<tr>
<th>文字</th>
<th>エンティティコード</th>
</tr>
<tr>
<td><</td>
<td>&gt;</td>
</tr>
<tr>
<td>></td>
<td>&gt;</td>
</tr>
<tr>
<td>&</td>
<td>&amp;</td>
</tr>
<tr>
<td>”</td>
<td>&quot;</td>
</tr>
</table>

表の中の文字よりもhtmlタグの方が多くてわけがわからなくなりました。モット複雑な表なんか作る気になれません！

JP Markdown

簡単に表を作成できるプラグインを探してみた

WordPressでサクッと表を簡単にできる方法はないかと調べてみました。めざすものとして

  • テキストエディタで完結したい
    ビジュアルエディタや表作成専用の画面に遷移することなく表を作成できる方法

  • 複雑な機能はいらない
    セル同士の結合や並び替え、表計算の必要はない

表作成に特化したプラグインがいくつかありましたが、ビジュアルエディタに拡張機能を加えるものや表作成用の画面に移動してのものが多く、目的に合うものが見当たりませんでした。

見つけた表作成関連のプラグイン

JP Markdownプラグインでマークダウン書式を使うのが目的の用途に最適か？

調べた結果、JP Markdownプラグインをインストールし、Markdown書式で表を作成するのが当初の目的に合うことがわかりました。

上記のプラグイン含め下のサイトを参照しました。

WordPressでテーブル・表を作成するプラグイン7個まとめWordPressでテーブル・表を作成するプラグイン7個まとめ


JP Markdownプラグインのインストール

WordPressの他のプラグインと同様のインストールになります。ざっくり言えば、

  1. ダッシュボード→プラグイン→新規追加の画面から

  2. JP Markdownで検索

  3. JP Markdownを見つけたら「今すぐインストール」ボタンをクリック

  4. 有効化する

で、インストールは終了。設定は特にありません。(コメント欄でマークダウン書式を使用したい時はチェックを入れる場所がありますが、当サイトではこの設定はしていません)

マークダウン書式で表作成の説明

下の表を例としてマークダウン書式での表の作り方を解説します。

左寄せにしてみる 中央寄せにしてみる 右寄せにしてみる
コロンを左に コロンを左右に コロンを右に
左 中央 右

この表をマークダウン書式で書くと下のようになります。

|左寄せにしてみる|中央寄せにしてみる|右寄せにしてみる| →→ヘッダー行
|:—|:—:|—:| →→セル内の
|コロンを左に|コロンを左右に|コロンを右に|
|左|中央|右|

表作成のキモは半角の「|」

マークダウン書式で表の枠組みを作るには「|」を使います。「|」は「バーチカルバー」とか「パイプ」とか「パイプライン」などと呼ばれます。以下、パイプと呼ぶこととし、

マークダウン書式ではパイプを並べることで列数を簡単に設定できます。上の例で見るとパイプの数は4本なので

|① |② |③|

(4-1)=3列の表ができます。また、1行目は自動的にヘッダーとなります。

2行目は左寄せ、中央寄せ、右寄せを決める

2行目の

|:—|:—:|—:|

「:(コロン)」をどこに付けるのかで左寄せ、センタリング、右寄せを決めます。

コロンを

  • 左につけると左寄せ
  • 右につけると右寄せ
  • 左右につけるとセンタリング

その行はヘッダーを含めすべて2行目で指定した場所に寄せられます。たとえばヘッダー行だけ中央寄せにしたい場合は力ずくで

|<center>左</center>|中央|<center>右</center>|
|:—|:—:|—:|
|コロンを左に|コロンを左右に|コロンを右に|
|左|中央|右|

のように記述すると下のようにヘッダーだけセンタリングされました。

左
 中央
右
コロンを左に コロンを左右に コロンを右に
左 中央 右

なお、「-(マイナス)」の数は2つ以上ならいくつでも大丈夫、コロンを含め3文字以上で表だと認識されます。

3行目以降はデータ

基本は同じ列数でいくつでも行を作成できます。

最後に

WordPressに限らずhtmlの世界ではわずらわしい表作成が簡単にできるようになりました。

「|(半角パイプ)」を使って表を作成するのは、以前使ったことがあるpukiwiki書式に似ていることも影響しています。pukiwiki書式の方が自由度が高いですが・・・

複雑なことはできませんが、表形式で書いた方がわかりやすい場面ってけっこうあったりするので、そんなときテキストエディタから離れることなく、かつ、簡単な書式で表が作れるこの方法はとても気に入っています。

JP Markdown自体の動作も軽くていいですね・・・😀

文字 エンティティコード
< &lt;
> &gt;
& &amp;
“ &quot;

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

seabird

コメント

  1. ワードプレス JP Markdown プラグイン | 気になる身になるブログ より:
    2019年3月18日 2:08 PM

    […] [WordPress] JP Markdownで表を簡単に作ることができた […]

    返信
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus