ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5, インライン画像, インラインコード, キーボード入力って何だ?

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressの編集メニューで『インラインコード』『インライン画像』『キーボード入力』というものがあります。

インライン画像は使ってる人も多いでしょうが、インラインコード、キーボード入力は使う機会が少なく分からないままの人もいるんじゃないでしょうか?

かく言うボクも使ったこと無いので、何なのかを試したいと思います。

インラインコード、インライン画像、キーボード入力は、ブロックのオプションではありません。なので編集画面の右のブロック・オプションにはありません。

これらはテキストの編集メニューの項目で、画面上部の太字や斜め文字(イタリック)、リンクなどと同じところにあります。

Gutenbergメニュー インライン画像

テキスト入力フィールドにカーソルがあるときにだけ使われるメニューです。

ときおり、画面上部に出ないことがありますが、そのときはカーソルを当てたテキストフィールドのすぐ近くにポップアップメニューとして出てくるので必ず目にします。

インライン画像

インライン画像は使ってる人も多いと思います。テキストの途中で画像を差し込みたいときに使います。

こんな感じ。

文章の途中で、画像(wordpress image)を入れました。

インライン画像は、テキストが入力できるところであれば、テーブルのセル(項目)や引用などでも挿入できます。

インラインコード

インラインコードは、テキストを<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>は改行や半角スペースをそのまま表示するから。

一般的なコードのHTML
<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のインラインの性格をもっています。

Gutenbergメニュー インライン画像

太字は<strong>、リンクは<a>、イタリック(斜め文字)は<em>、打ち消し線は<s>、専門のHTMLタグが無ければ<span>を使ってCSSでデザインしています。

これらのHTMLタグはすべてインラインのもの。

なぜ、編集画面の右にあるブロックのオプションに無いのか分かるでしょう。ブロックとインラインは相反するものだから。

それは画像ブロックとインライン画像の違いを見ればよく分かります。

前の投稿
WordPress5, テーブルのセルに画像を挿入する方法。プラグインは使いません。
WordPress5, 画像ブロックとインライン画像のちがい。
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す