WordPressの編集メニューで『インラインコード』『インライン画像』『キーボード入力』というものがあります。
インライン画像は使ってる人も多いでしょうが、インラインコード、キーボード入力は使う機会が少なく分からないままの人もいるんじゃないでしょうか？
かく言うボクも使ったこと無いので、何なのかを試したいと思います。
インラインコード、インライン画像、キーボード入力は、ブロックのオプションではありません。なので編集画面の右のブロック・オプションにはありません。
これらはテキストの編集メニューの項目で、画面上部の太字や斜め文字（イタリック）、リンクなどと同じところにあります。
テキスト入力フィールドにカーソルがあるときにだけ使われるメニューです。
ときおり、画面上部に出ないことがありますが、そのときはカーソルを当てたテキストフィールドのすぐ近くにポップアップメニューとして出てくるので必ず目にします。
インライン画像
インライン画像は使ってる人も多いと思います。テキストの途中で画像を差し込みたいときに使います。
こんな感じ。
文章の途中で、画像（
）を入れました。
インライン画像は、テキストが入力できるところであれば、テーブルのセル（項目）や引用などでも挿入できます。
インラインコード
インラインコードは、テキストを<code></code>で括ります。コードというくらいなのでプログラミングなどのコードを書くときに使うんですが、ある文章をまとめるときにも使ったりします。
たとえば、
<html>
<body></body>
</html>
このHTMLは段落ブロックで書いてあるんですが、このテキスト全体にインラインコードを当てるとこうなります。
<html>
<body></body>
</html>
見た目は変わらないでしょうが、これをHTMLで見ると一目瞭然。
<p><html><br> <body></body><br></html></p><p><code><html><br> <body></body><br></html></code></p>使い勝手が悪いので使うことはない。
上のHTMLには<body>の前に半角スペースのインデントを入れてるんですが、それが反映されません。最悪なのは編集画面上はインデントが入ってるのでそうなるだろうと勘違いしてしまうところ。
それに、HTMLの<code>はさらに<pre>で囲うのが一般的です。<pre>は改行や半角スペースをそのまま表示するから。
<pre><code>ここにコードを書く
・
・
・
コードの最後の行</code></pre>インラインコードは一行のコードを書く分には使えますが、それ以外では使えない。そもそもプログラムコードは複数行に渡って書くのが当たり前なので余計に使わない。
それに、プログラムコードをきれいに表示するツールがあります。
ボクはPrism.jsを使ってるんですが、これを使うとこうなる。
<html>
<body></body>
</html>こんな良いものがあるのに使わない手はない。
使い勝手の悪さをもう一つ。
複数段落ブロックで書いたものをまとめてインラインコードにはできません。
段落ブロックでShift + Enterを使って一段落で複数行を表現したときじゃないと当てられない。
キーボード入力
キーボード入力は、ボタンのキーを表すのに使います。HTMLの<kbd></kbd>で囲います。
編集の仕方は太字やリンクなどと同じで、当てたいテキストを選択状態にしてメニューで『キーボード入力』を選ぶと<kbd></kbd>で囲まれます。
たとえば、
Ctrl + Shift + Win
と書いても分かりにくいので、
Ctrl + Shift + Win
とするとキーっぽくなります。
ただ注意が必要で、デフォルトではインラインコードと同じようにあまり違いが出ません。CSSで<kbd>に対してデザインが必要です。
ちなみに上のキーのCSSはこうなってます。
kbd {
background-color: #eee;
border-radius: 4px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #888;
font-weight: 700;
padding: 3px 5px;
}画面上部のテキスト編集メニューは『インライン』
さて、頻繁に『インライン』という言葉が出てきますが、これらの入ってるテキストに何かをする編集メニューはすべてHTMLのインラインの性格をもっています。
太字は<strong>、リンクは<a>、イタリック（斜め文字）は<em>、打ち消し線は<s>、専門のHTMLタグが無ければ<span>を使ってCSSでデザインしています。
これらのHTMLタグはすべてインラインのもの。
なぜ、編集画面の右にあるブロックのオプションに無いのか分かるでしょう。ブロックとインラインは相反するものだから。
それは画像ブロックとインライン画像の違いを見ればよく分かります。
