「タブ」ブロック

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

※「タブ」ブロックは AMP ページは未対応です。

サンプル
特徴
機能解説

サンプル

横並び

タイトル 1のコンテンツ

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

タイトル 3 のコンテンツ

デザイン変更

Nishiki Pro テーマのユーザー同士の情報交換や開発者との交流の場として、会員なら誰でも参加できる「サポトピアユーザーコミュニティ」を活用ください。

ユーザーコミュニティの参加について開発者とユーザーとの間で、情報の共有/交換をおこなったり、要望/質問/相談などを投稿する場をつくりました。support.animagate.com

特徴

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

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

タブの並び替えは「ドラッグ＆ドロップ」で直感的に

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

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

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

アクセシビリティ対応

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

「タブ」の SEO は大丈夫？

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

コラム：隠されたコンテンツの扱いは？

Google が運営に関わっているウェブサイト（例えば https://amp.dev/ とか）では、タブはもちろん、ページを訪れた人が操作するまで隠されているコンテンツもあります。

加えて、デスクトップ、タブレット、スマートフォン、それぞれ特定のサイズで閲覧した際に適したコンテンツを表示するよう、一部のコンテンツを隠すような実装が多く施されていますね。

このような「隠されているコンテンツ」は、Google 運営のウェブサイトだけではなく、レスポンシブウェブデザインを採用しているウェブサイトならば、ほぼ施策として導入しているでしょう。

それらのウェブサイトを Google が検索結果で意図的に評価を下げるとは考えにくい、という見解を開発者は持っています（Google から公式にアナウンスしてくれるといいのに、とは思いますけどね）。

機能解説

レイアウト設定

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

アイコン設定

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

タブカラー

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

コンテンツカラー

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