【Cocoon】ブロックエディターで赤アンダーラインを引く方法

Cocoon
スポンサーリンク

赤アンダーラインが引けなくなった?!

『文章の一部分に赤アンダーラインを引きたい!』

やりたいのは たったそれだけです。

WordPressテーマ「Coccon」の旧エディターでは、「スタイル」に赤アンダーラインの項目があったのですが…。

残念ながら、新エディター(ブロックエディター/Gutenberg)に「赤アンダーライン」は実装されていません。

上のように「赤アンダーラインマーカー」なら、これまでどおり問題なく使えます。

ただ、お堅い文面の記事を執筆しているときなど、ポップなマーカーよりラインのほうを使いたい場面があるのも事実です。

かといって記事の執筆中、赤アンダーラインを引くためだけに、わざわざコードエディターに切り替え、<span class=”○○”>…なんてこともやりたくない。

つまり、「ビジュアルエディターのまま赤アンダーラインを引く」というのが、今回のミッションです。

スポンサーリンク

クラシックブロックを利用する方法

おおまかな手順はこんな感じです。(↓)

  1. クラシック版の段落内で赤アンダーラインを引く
  2. ブロックへ変換する

まず、クラシック版のブロックを挿入します。

この段落内で文章を編集し、従来どおりの方法で「スタイル」から赤アンダーラインを引きます。

あとは、このクラシック版の段落(ブロック)を選択した状態で、「ブロックへ変換」をおこないます。

すると文字どおり、通常のブロックに変換されます。

最後に、コードエディターに切り替えて いちおう確認。

(※エディターの切り替えは、CtrlAltShiftM

<p>タグ内に赤アンダーラインの要素が正常に追加されていれば終了です。(おしまい)

タイトルとURLをコピーしました