[WordPress]Gutenbergでブロックの一部分だけ背景色や文字色を変更する

やりたいこと

下記のような感じ↓↓

ブロックの一部分だけハイライトしたい

やり方

HTMLで直接編集してstyleをする

  1. 文字を入力する。ex) ブロックの一部分だけハイライトしたい
  2. ブロックのメニューから「HTMLとして編集」をクリック
  3. ハイライトしたい部分を<span style=”color: white; background-color: #ff69b4; “></span>で囲む。ex) <p>ブロックの一部分だけ<span style=”color: #ffffff; background-color: #ff69b4;”>ハイライトしたい</span></p>
  4. 色を変更する。#ff69b4が背景色(background-color)。#ffffffが文字色(color)。色の指定はWebから取得すると簡単。https://www.colordic.org/
  5. ブロックのメニューから「ビジュアル編集」をクリック。元のモードに戻る。ハイライトされていることが確認できる。プレビューでも可能。

コメント