Ver1.7 Released !

SANGO Gutenbergで見出しやボタンを使う方法

SANGO gutenberg

SANGO Gutenbergでは様々な種類の見出しを使うことができます。

SANGO見出しブロックを使用する

「SANGO見出し」ブロックを使うには、Gutenbergのブロック挿入ポップアップからSANGO見出しを選択します。

見出しのスタイルを変える

見出しブロックを選択すると、右側に見出しの設定用のツールバーが表示されます。ここで、見出しのスタイルや色、フォントサイズ、アイコンの有無などを変更できます。

ツールバーが隠れている場合、右上の歯車ボタンをクリックすることで表示することができます。

その他の種類の見出しを使用する

以下のリンク先ではクラシックエディター(旧エディター)用の見出しを紹介していますが、Gutenbergでもこれらの見出しを使用することができます。

見出しの挿入方法と種類一覧 見出しの挿入方法と種類一覧

手順1. 通常の見出しブロックを挿入する

一般ブロックの「見出し」をエディタに挿入します。

手順2. 追加CSSクラスに見出しのクラス名を入力

挿入した見出しブロックを選択した状態では、画面右側のツールバーの「高度な設定」の中に「追加CSSクラス」という項目が表示されます。

この「追加CSSクラス」の中に、オリジナル見出しのクラス名を入力します。例えば、見出し14を使いたい場合、hh hh14と入力します。

見出しのクラス名は、こちらから確認できます(class="ここ" の部分が見出しのクラス名です)。


SANGOのボタンを使用する

Gutenbergのボタンブロックから、SANGOのボタンの一部を挿入することができます。

1.レイアウト要素⇒ボタン
2. 左上のアイコンをクリック
3. ボタン種類を選択

水色のSANGOラベルが表示されているもの以外は、WordPress標準のボタンスタイルです。

その他の種類のボタンを使用する

水色のSANGOラベルが表示されているもの以外は、WordPress標準のボタンスタイルです。

以下のリンク先ではクラシックエディター(旧エディター)用のボタンを紹介していますが、Gutenbergでもこれらのボタンを挿入することができます。

ボタンの挿入方法とデザイン一覧 ボタンの挿入方法と種類一覧

手順1:通常のボタンブロックを挿入する

手順2. 追加CSSクラスにボタンのクラス名を入力

ボタンブロックを選択した状態で、画面右側のツールバーの高度な設定⇒「追加CSSクラス」にボタンのクラス名を入力します。

追加CSSクラスを入力するとボタンデザインが変わる

ボタンのクラス名は「btn-sango ◯◯」という形で入力する必要があります。例えば「ボタンの種類一覧」で以下のように記載されている場合

「btn-sango cubic1 blue-bc」という文字列を追加CSSクラスに入力します。

TIPS

「btn-sango cubic1 blue-bc big」というようにクラス名の「big」を追加することでボタンのフォントサイズを大きくすることもできます。

また「btn-sango cubic1 blue-bc strong」と入力すると太字になります。

注意

これらのオリジナルボタンを使う場合、ツールバーの色設定は効かないことにご注意ください。

3 COMMENTS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です