タブにスタイルを追加

追加機能
この記事は約2分で読めます。
記事内に広告が含まれています。

はじめに

Gutenbergエディター

本スキンでは、Gutenbergエディターの「タブ」ブロックに、Cocoon標準にはないスタイルを追加します(図1参照)。
これにより、スタイルボタンをクリックするだけで、初心者でも簡単に「タブ」ブロックのスタイルを変更できるようになります。

表示例

  • デフォルト
  • 吹き出し
  • 下線
  • タブ 1
  • タブ 2
  • タブ 3
  • タブ 4
  • タブ 5
  • タブ 6

ジョルノ・ジョバァーナ

ブローノ・ブチャラティ

レオーネ・アバッキオ

グイード・ミスタ

ナランチャ・ギルガ

パンナコッタ・フーゴ

  • タブ 1
  • タブ 2
  • タブ 3
  • タブ 4
  • タブ 5
  • タブ 6

ジョルノ・ジョバァーナ

ブローノ・ブチャラティ

レオーネ・アバッキオ

グイード・ミスタ

ナランチャ・ギルガ

パンナコッタ・フーゴ

  • タブ 1
  • タブ 2
  • タブ 3
  • タブ 4
  • タブ 5
  • タブ 6

ジョルノ・ジョバァーナ

ブローノ・ブチャラティ

レオーネ・アバッキオ

グイード・ミスタ

ナランチャ・ギルガ

パンナコッタ・フーゴ

タブ数が多く、画面に収まらない場合、SWELL風のスクロールヒントを表示します。

手順

以下の手順で指定します。
「デフォルト」を選択すると、標準のデザインに戻ります。

  1. 「タブ」ブロックを選択します。
  2. スタイルを選択します。

表示がおかしい場合は、高度な設定→追加CSSクラスを削除してください。

さいごに

本スキンのカスタマイズにより、「タブ」ブロックに新たなスタイルが追加され、より魅力的なデザインが実現します。
CSSの追加なしで、初心者でもおしゃれなデザインを簡単に実現できます。

タイトルとURLをコピーしました