このページでは、Nishiki Pro テーマのバージョン 1.0.220 以降で使用できる「タブ」ブロックの解説をしています。
サンプル
横並び
タイトル 1のコンテンツ
タイトル 2 のコンテンツ
タイトル 3 のコンテンツ
縦並び（タブレットサイズ以下では横並び）
タイトル 2 のコンテンツ
タイトル 1のコンテンツ
タイトル 3 のコンテンツ
デザイン変更
Nishiki Pro テーマのユーザー同士の情報交換や開発者との交流の場として、会員なら誰でも参加できる「サポトピア ユーザーコミュニティ」を活用ください。
Nishiki Pro テーマの最新情報やアップデート情報を Twitter で配信しています。フォローぜひ！
特徴
タブコンテンツ内に様々なブロックが追加可能
タブコンテンツそれぞれ、好きなブロックが入れられるよう作られています。
タブの並び替えは「ドラッグ＆ドロップ」で直感的に
「このタブ、最初に表示したほうがいいかな？」など、並び替えしたくなることもあると思います。そんな時は、下の動画のように操作してください。
アクティブなタブを指定可能
ページを開いた際、最初に表示させたいタブを指定できます。
アクセシビリティ対応
「タブ」ブロックは、より多くの人が様々な環境・状況下でも情報が得られやすく、利用しやすい「アクセシビリティ」の対応に務めています。（実装は mdn に準拠させました）
「タブ」の SEO は大丈夫？
「タブの隠れている部分は Google の検索エンジンに評価されるの？」と、SEO について疑問に思う勉強熱心な人もいると思いますが、隠れている部分の文字列を検索しても Google 検索結果に表示されます。つまり、しっかりとインデックスされますので大丈夫です（本ページ公開時点の情報）。
Google が運営に関わっているウェブサイト（例えば https://amp.dev/ とか）では、タブはもちろん、ページを訪れた人が操作するまで隠されているコンテンツもあります。
加えて、デスクトップ、タブレット、スマートフォン、それぞれ特定のサイズで閲覧した際に適したコンテンツを表示するよう、一部のコンテンツを隠すような実装が多く施されていますね。
このような「隠されているコンテンツ」は、Google 運営のウェブサイトだけではなく、レスポンシブウェブデザインを採用しているウェブサイトならば、ほぼ施策として導入しているでしょう。
それらのウェブサイトを Google が検索結果で意図的に評価を下げるとは考えにくい、という見解を開発者は持っています（Google から公式にアナウンスしてくれるといいのに、とは思いますけどね）。
機能解説
レイアウト設定
| 機能 | 概要 | デフォルト値 |
|---|---|---|
| タブ配置 | タブの並びを変更（縦配置はタブレットサイズ以上） | 横 |
| タブの横幅 | タブの横幅を設定（縦配置のみ有効） | なし |
| テキスト配置 | タブのテキスト配置を変更 | 左 |
| タブの間隔をあける | タブの間隔をあけます（横配置のみ有効） | ON |
| タイトルを表示 | タイトルテキストを表示（スマートフォンサイズ以上） | ON |
| タブの枠線を表示 | ON | |
| コンテンツの枠線を表示 | ON |
アイコン設定
| 機能 | 概要 | デフォルト値 |
|---|---|---|
| アイコン | タイトルの左隣にアイコンを付ける | 横 |
タブカラー
| 機能 | 概要 | デフォルト値 |
|---|---|---|
| 枠線カラー | - | なし |
| 背景カラー | - | なし |
| テキストカラー | - | なし |
| 背景カラー（アクティブ） | - | なし |
| テキストカラー（アクティブ） | - | なし |
コンテンツカラー
| 機能 | 概要 | デフォルト値 |
|---|---|---|
| 枠線カラー | - | なし |
| 背景カラー | - | なし |
ブロックを扱うときの注意点
「複製」したブロックは、必ずページを保存し、リロード（更新）してから操作してください。
リスト表示からブロックを操作すると、タブとコンテンツの連動に矛盾が生じる場合があります。「タブ」ブロックのタブやコンテンツを「追加」「削除」したい場合は「タブ」ブロック内での操作をお願いします。
WordPress テーマ Nishiki Pro
「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。
ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。
ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。
最新情報をチェック！
Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀
- リリース情報
- 新機能の紹介
- 便利な使い方
- 開発中の機能紹介
- 導入事例
- あるある日常ネタ
など
