Web Design Note

WordPressのブロックエディタ上で簡単にHTMLタグを挿入できたら時短になりますよね。例えば<code>タグや装飾用の<span>タグなど、本文で繰り返し使うHTMLタグをワンクリックで挿入する方法について解説します。

HTMLタグとは？

HTMLタグは、文字を強調したり、見出しを付けたり、リンクを貼ったり…文章の中の特定の箇所に指示を出すためのコードです。

当ブログでもコード部分を区別しやすくしたり（例：font-size: 16px;）、マーカー風のラインを引いたり（例：ここにマーカー）するときにHTMLタグを活用しています。

原始的な方法であればWordPressブロックエディタの「HTMLとして編集」モードで、以下のように打てばそれぞれコードやマーカーのスタイルを当てられるのですが、手打ちで毎回コードを書くのはとても大変です。

そこで、<code>タグや<span>タグをWordPressの投稿画面からワンクリックで挿入する方法をまとめました。

<code>タグを挿入する方法

実は<code>タグは通常の投稿画面から簡単に追加できます。

<code>タグで囲みたいテキストを選択した状態で、ブロックエディタ上のツールバー右端にある「∨」→「インラインコード」をクリックすると自動的に<code>と</code>が挿入されます。

これで<code>で囲まれた部分に対してお好みのスタイルをあてることができます。

ちなみにこのブログではコード部分のスタイルを次のようにしています。ご参考まで…

code {
  font-family: 
  Consolas, 
  Monaco, 
  'Courier New', 
  monospace;
  font-size: 0.95em;
  background-color: #B0B0B099;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

装飾用の<span>タグを挿入する方法

続いて装飾用の<span>タグです。

このブログのように文章の一部だけ色やサイズを変えたり、ラインを引いたりしたいとき、<span>タグを使うのが一般的です。

<span>タグは<code>タグとは違って標準のツールバーから追加することができないため、RichText Extensionというプラグインを使います。

手順1. RichText Extensionをインストールして有効化

WordPressのダッシュボード→「プラグイン」→「プラグインを追加」でRichText Extensionを検索し、「インストール」→「有効化」します。

手順2. 設定画面で好みの装飾を設定する

このようにマーカーの色と透明度、太さが自由に設定できるほか、タイプで「ストライプ」を選べばかわいい縞々のラインも設定できます。

またフォントサイズの設定もできるので、マーカーラインだけでなく文字の大きさもワンクリックで編集することができます。

手順3. ツールバーから操作

RichText Extensionの設定が完了するとブロックエディタのツールバーにハケのようなアイコンが追加されます。

装飾したいテキストを選択した状態でハケアイコンをクリックすると、RichText Extensionの設定で登録した装飾が選択できるようになっています。

ここで付けたい装飾をクリックすると、投稿画面上でもラインが引かれた状態になります。

試しに「HTMLとして編集」モードで確認してみると…

このように自動的にクラス名付きの<span>タグが挿入されています！

ちなみにフォントサイズを変えたい場合は、ハケアイコンの隣の「A」アイコンをクリックしてください。

まとめ

WordPressのブロックエディタから、ワンクリックで<code>タグと<span>タグを挿入する方法をご紹介しました。コード部分を装飾したり、重要な部分にラインを引いたりすることでより読みやすいブログになりそうですね。