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

【SANGO タブブロック】の使い方

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

複数のページを項目ごとなどで表示したい場合など、タブ機能を使うと便利です。

例えば以下のようなリストを【SANGO タブブロック】で作ることができます。

サンプル例

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

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

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

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

各種設定項目

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

タブ名変更

「タブ1」と書かれている箇所にカーソルを合わせ、クリックすると文字を変更できます。

入力前

タブ1の内容が入ります

タブ2の内容が入ります

入力後

新着情報が入ります

ランキングが入ります

タブ数の増減

タブ数を減らしたい時は、右上にある「ー」のボタンをクリック、追加したい時は「+」のボタンをクリックすることでタブ数を変更することができます。

タブの並べ替え

左上のアイコンをつまむことでタブを並べ替えることができます。

タブのコンテンツ

赤枠内の「タブのコンテンツ」から「タブのコンテンツ終わり」の部分までが、タブをクリックした時に表示される内容になります。

アイコン

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

選択時のタブの背景色

選択時のタブの背景色をお好きな色に変更できます。

コメントを残す

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

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