Gutenberg完全対応のSANGO Gutenberg について

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

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

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

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

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

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

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

2. CSSを追加する

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

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

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

CSSのカスタマイズの参考

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

コメントを残す

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

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