WordPressの投稿エディタのボタン類について

以前から気になっていたWordPress投稿エディタのボタン類について、これらの使い方と、カスタマイズの方法をご紹介します。

こんにちは、40webdesigner（@40webdesigner）です。

ボタン類は、テキストを入力後適応したい箇所を選択してボタンをクリックすると、以下のように働きます。

デフォルトで設定されているもの

b

strongタグで囲まれます。
strongはhtml5の場合「強い重要性」を意味します。装飾のためだけに使うのはNGです。文章の意味として重要性が高い場合に使用します。

i

emタグで囲まれます。
emタグは文章を強勢する場合に使用します。こちらも装飾のためだけに使うのはNGです。英文の場合斜体になることが多いようですが、日本文の場合は適さないことが多いので、CSSで色を変えたり、下線を引くなどの工夫が必要かもしれません。

link

aタグで囲まれます。
リンクを設定する場合に使用します。

カスタム設定

URL：リンク先のURLを入力します。
タイトル：リンクにマウスが乗ったときに現れるテキストを指定します。いわゆる代替テキストです。
リンクを新しいウィンドウまたはタブで開く：チェックを入れるとリンク先が新しいウィンドウまたはタブで開きます。自分のWebサイト内リンクはチェックなし、外部リンクはチェックあり、などルールを決めておくといいと思います。

既存のコンテンツにリンク

既に投稿済みの記事やページについては、簡単にリンクを貼ることができます。

b-quote

blockquoteタグで囲まれます。
blockquoteは他の情報源からの引用・転載であることを表します。
これがある場合、作品のタイトルを表すciteタグがあってもいいように思うのですが、デフォルトでこのボタンは用意されていません。citeタグを作者名には使えないのでややこしいからでしょうか。
blockquoteにはcite属性（タグではないですよ）を使用して、引用元のURLを記述しておくことができます。

del

delタグで囲まれます。
delタグは削除された部分であることを示します。
イメージしやすいのは、ある一定期間使用していた「受付中！」を取り消して、「受付は終了しました」と挿入する感じでしょうか。

ins

insタグで囲まれます。
insタグは追加された部分であることを示します。

img

imgタグの挿入のためのボタンで、画像を表示させたいときに使うのですが、alt属性は指定できるものの、widthもheightも出てこないし、これ何のためにあるんだろう・・・。「メディアを追加」で代用できます。

ul, ol, li

ulタグは順序のないリスト、olタグは順序のあるリストに使います。
liタグは各リスト項目で、ulまたはolタグで囲います。

code

codeタグで囲まれます。
codeタグはプログラムコードなどであることを示します。通常はあまり使いませんね。
コード自体を表示したくても、普通にコードを書いただけでは文字として認識してくれないので、このタグで囲むようですが、それであればプラグインを入れたほうがいいと思います。

more

が挿入されるようです。
これはHTMLタグではなくWordPressの仕様で、「続きを読む」を挿入したいときに使用します。
アーカイブページなどで本文が全部表示されるのを防いで、個別記事ページヘ誘導します。

タグを閉じる

文字通りタグを閉じてくれるのですが、エディタのボタンの使い方で、先に文章を入力してタグを挿入したい部分を選択してからボタンを押すと、開始タグと終了タグが同時に挿入されます。そうではなく、先にボタンを押すと開始タグだけが挿入されますので、文章を入力後もう一度同じボタンを押すか、「タグを閉じる」を押すと閉じタグが挿入されます。使い方は好みと慣れという気がします。

プラグインを利用してボタンをカスタマイズする

Addquicktagなどのプラグインを利用すると、よく使うタグなどをボタンとして登録することができます。
見出しタグや自分で設定したspanやdivなどを登録しておくと便利です。