【SANGO 見出しブロック】の使い方

この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO 見出しブロック】について解説していきます。

【SANGO 見出しブロック】は、WordPressの標準の見出しブロックでは実現できないアイコン付きの見出しや、SANGOの種類豊富な見出しデザインから選択していただけるブロックになっています。

例えば以下のような見出しを【SANGO 見出しブロック】で作ることができます。

見出しサンプル1

見出しサンプル2

見出しサンプル3

見出しサンプル4

見出しサンプル5

これらの見出し以外にも30種類の見出しスタイルからお気に入りの見出しのスタイルを選択していただけます。

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

SANGO見出しブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGO見出し」と書かれたブロックを選択します。

各種設定項目

次に、SANGO見出しブロックの設定項目についてご紹介します。

基本のプリセット

SANGO見出しブロックでは設定できるスタイルの数が非常に多いため、SANGOではデザインに迷わないよう、いくつか「背景色」、「色」、「ボーダー色」を組み合わせたスタイルを用意しております。デザインに迷われる方はそこから選択いただくのが無難かもしれません。

スタイル

基本のプリセットに好みのデザインがない場合は、ご自身でスタイル項目からお好きなデザインの見出しを選択することができます。30種類のスタイルを用意しています。

見出しタグ

見出しに対して適応されるタグの種類を選択できます。記事を構造化する上で見出しタグを選択することは重要になってきます。h2, h3, h4, pタグの中から選択いただけます。

アイコン

見出しの先頭に表示されるアイコンを選択できます。FontAwesomeに登録されているアイコンの中からお好きなアイコンを選択いただけます。font-awesomeのアイコン名をご存知の場合は、クラス名で検索と書かれたフィールド内に、アイコン名を入力していただくことでアイコンを絞り込むことができます。

フォントサイズ（em）

em指定で、タイトルのフォントサイズを指定することもできます。

各種色設定

また、アイコンカラーや、タイトルカラー、背景色カラーそれぞれに対して適応される色を指定することもできます。