ブロックエディターの装飾にオリジナルの装飾を増やすためのカスタム書式機能について

この記事ではSANGO Gutenbergのカスタム書式機能について紹介します。カスタム書式機能を使うとツールバーに以下のように通常の装飾に加えてオリジナルの装飾を増やすことができます。

カスタム書式のリストはツールバーの鉛筆アイコンをクリックすると表示されます。SANGOの装飾機能と同じように装飾したいテキストを選択して、該当の書式をクリックしていただくだけで装飾が適用されます。

この記事では、SANGOのカスタム書式機能にCSSを登録してご利用いただく方法を紹介します。

目次非表示

1. カスタム書式設定を開く

記事編集画面の右上にある、SANGOマークをクリックします。

SANGO Settings と書かれたパネルが表示されるので、その中のカスタム書式から、+カスタム書式を作成と書かれたボタンをクリックします。

以下のようなダイアログが表示されるので、それぞれ、名前、クラス名、CSSを入力します。

今回はこのような蛍光ペンのような書式を追加してみました。CSSは以下のようになります。

CSS

.custom-highlight {
    background: linear-gradient(transparent 70%,#d2ff50 0);
}

また上の画像のSANGO Landにてカスタム書式 カテゴリーでお気に入りに登録したものはカスタム書式としてエディター画面で取り込むことができます。

CSSに不慣れな方はSANGO Landよりお気に入りのカスタム書式を取り込んでいただくのがお勧めです。

ただしクラス名が同じ書式がある場合は取り込まれませんのでご注意ください。

SANGO Landのデータを取り込む ボタンをクリックするとお気に入りに登録したカスタム書式が自動で登録されるので、以下の画像のようにカスタム書式が充実します！

SANGO Landとの連携設定が完了していない方は以下の記事をご覧ください。

CSSのカスタマイズ方法については同ブログでデザイン例をいくつか紹介していますのでこちらの記事が参考になるかと思います。