このページでは、Nishiki Pro テーマのバージョン 1.0.314 以降で使用できる「タブ」ブロックの解説をしています。

目次

• サンプル
  • 横並び
  • 縦並び（タブレットサイズ以下では横並び）
  • デザイン変更
• 特徴
  • タブコンテンツ内に様々なブロックが追加可能
  • タブの並び替えも可能
  • タブの複製も可能
  • アクティブなタブを指定可能
  • アクセシビリティ対応
  • 「タブ」の SEO は大丈夫？
• ブロックが新しくなりました
  • 非推奨のブロックについてよくある質問
  • 非推奨のブロックを扱うときの注意点
• 機能解説
  • レイアウト設定
  • アイコン設定
  • タブカラー
  • コンテンツカラー

サンプル

横並び

縦並び（タブレットサイズ以下では横並び）

デザイン変更

特徴

タブコンテンツ内に様々なブロックが追加可能

タブコンテンツそれぞれ、好きなブロックが入れられるよう作られています。

タブの並び替えも可能

「このタブ、最初に表示したほうがいいかな？」など、並び替えしたくなることもあると思います。そんな時は、下の動画のように操作してください。

タブの複製も可能

以下の動画のように操作すれば、タブとコンテンツが複製されます。

アクティブなタブを指定可能

タブを選択することで、ページを開いた際、最初に表示させたいタブを指定できます。

アクセシビリティ対応

「タブ」ブロックは、より多くの人が様々な環境・状況下でも情報が得られやすく、利用しやすい「アクセシビリティ」の対応に務めています。（実装は mdn に準拠させました）

「タブ」の SEO は大丈夫？

「タブの隠れている部分は Google の検索エンジンに評価されるの？」と、SEO について疑問に思う勉強熱心な人もいると思いますが、隠れている部分の文字列を検索しても Google 検索結果に表示されます。つまり、しっかりとインデックスされますので大丈夫です（本ページ公開時点の情報）。

ブロックが新しくなりました

バージョン 1.0.314 から「タブ」ブロックが新しくなりました。

バージョン 1.0.313 以前の「タブ」ブロックは「非推奨」です。非推奨のブロックは、新しいブロックと区別するため、下のようにブロック名に「非推奨」が付いています。

以下に非推奨のブロックについてよくある質問をまとめましたので、参考ください。

非推奨のブロックについてよくある質問

非推奨のブロックを扱うときの注意点

以下の現象は、新しい「タブ」ブロックでは発生しません。できる限り、新しい「タブ」ブロックを使用してください。

非推奨の「タブ」ブロックを「複製」した場合は、必ずページ全体を保存したあと、リロード（更新）してから操作してください。

また、ブロックエディターのリスト表示からブロックを操作すると、タブとコンテンツの連動に矛盾が生じる場合があります。「タブ」ブロックのタブやコンテンツを「追加」「削除」したい場合は「タブ」ブロック内での操作をお願いします。

機能解説

レイアウト設定

機能	概要	デフォルト値
タブ配置	タブの並びを変更（縦配置はタブレットサイズ以上）	横
タブの横幅	タブの横幅を設定（縦配置のみ有効）	なし
テキスト配置	タブのテキスト配置を変更	左
タブの間隔をあける	タブの間隔をあけます（横配置のみ有効）	ON
タイトルを表示	タイトルテキストを表示（スマートフォンサイズ以上）	ON
タブの枠線を表示		ON
コンテンツの枠線を表示		ON

アイコン設定

機能	概要	デフォルト値
アイコン	タイトルの左隣にアイコンを付ける	横

タブカラー

機能	概要	デフォルト値
枠線カラー	-	なし
背景カラー	-	なし
テキストカラー	-	なし
背景カラー（アクティブ）	-	なし
テキストカラー（アクティブ）	-	なし

コンテンツカラー

機能	概要	デフォルト値
枠線カラー	-	なし
背景カラー	-	なし