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

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

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

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

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

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

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

2. CSSを追加する

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

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

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

SANGO Landからカスタム書式を取り込む

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

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

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

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

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

SANGO LandとSANGO GutenbergをAPI連携する方法SANGO LandとSANGO GutenbergをAPI連携する方法

CSSのカスタマイズの参考

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

2 COMMENTS

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。