ブロックエディタ内の任意の文字列に対する装飾機能(テスト版)

ブロックエディタ内の任意の文字列に対する装飾機能(テスト版)

【HABONE】ではWordPressの標準機能にはない、以下のような文字ごとの装飾をできるようにしています。

  • 任意の文字にアンダーラインを引く(赤・青・黄)
  • 任意の文字に背景色(マーカー)を付ける(赤・青・黄)
  • 任意の文字を拡大する(1.2倍または1.5倍)

【HABONE】バージョン1.0時点では、文末の参考記事を基にテスト実装したものですので、今後仕様が変わる可能性がありますが、仕様が変わっても、使われている箇所のデザインが変わることがないよう対処する予定ですのでお使いいただいて構いません。

一応、WordPress標準の文字装飾を含め、複数の指定を適用させたり、解除することはできますが、テスト版のため、適用や解除をする箇所・順番によっては正常に処理できないことがあります

文字列装飾の仕方

以下の手順で任意の文字へ装飾を加えることができます

  1. 装飾したい文字をドラッグして選択します
  2. 編集メニューバーの足マーク(赤枠部分)をクリックします
  3. 装飾の種類を選択します

以下編集画面の参考画像です。

ブロックエディタ内の任意の文字列に対する装飾機能(テスト版)|HABONE

文字列装飾解除の仕方

装飾を解除したい場合は、解除する箇所を再びドラッグして、もう一度装飾ボタンをクリックします。

もしも解除されない場合には、一旦「HTMLとして編集」へ変更し、装飾を行っていた前後に入っている以下のタグを削除してください。

  • <mark class=”〇〇”>と閉じ子の</mark>
  • <span class=”〇〇”>と閉じ子の</span>

以下編集例です(上がビジュアル編集時の画像、下がHTMLとして編集時の画像です)。赤枠で囲まれた部分を削除すれば装飾のない状態に戻すことができます(例)。

ブロックエディタ内の任意の文字列に対する装飾機能(テスト版)|HABONE
ブロックエディタ内の任意の文字列に対する装飾機能(テスト版)|HABONE

他のテーマへ移行するときは

テーマを【HABONE】とは別のものへ変更した場合、それまで設定した文字装飾は無効となり、装飾されない状態となってしまいます(これは【HABONE】に限らずどのテーマでもあり得ることです)。

別のテーマへ移行しても、閲覧画面上で、今までの装飾をそのままの状態で維持したい場合には、以下のコードをテーマの「追加CSS」へ追記してください。

/***** 下線 *****/
mark.style-buline {
	background: linear-gradient(transparent 70%, #97ccff 75%);
}

mark.style-yuline {
	background: linear-gradient(transparent 70%, #ffff84 75%);
}

mark.style-ruline {
	background: linear-gradient(transparent 70%, #ff66c9 75%);
}

/***** マーカー *****/
mark.style-ymark{
	background: linear-gradient(transparent 0%,#ffff84 0%);
}

mark.style-bmark{
	background: linear-gradient(transparent 0%,#97ccff 0%);
}

mark.style-rmark{
	background: linear-gradient(transparent 0%,#ff66c9 0%);
}

/***** 文字拡大 *****/
.large-font-two {
	font-size: 1.2em;
}

.large-font-five {
	font-size: 1.5em;
}

上記コードを追加しても、ほとんどのテーマでは、編集画面側の表示には反映されません。編集画面側での表示方法については、変更したテーマのマニュアルやフォーラムなどを参照ください。

また、本機能を変更後のテーマでも使用し続けたい場合には、「文字装飾機能の追加」の記事を参考に移行をおこなってください。


本機能は導入にあたり、以下のページの内容を参考にさせていただきました。

WordPress Gutenbergのリッチテキストツールバーにドロップダウンメニューボタン追加

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球