拡張パーツ > タブ切替表示

クラフトマスターイメージイラスト

それぞれが完結している複数の項目をページ内に区分けして置きたい場合などに役立つパーツです。各コンテンツをまとまりごとに区切って見出しタブをつけたデザインをつくります。また、タブをつける位置は水平か垂直方向を選ぶこともできます。タブ表示がスペース的に難しいモバイル端末では、伸縮可能エリアと同じ見た目に変わります。

ちょっと専門メモ:検索エンジンによってはページ内のデータを解析し、隠すよう指定されている情報は重要ではないものであると判断する場合があるようです。表示内容の整理に役立つパーツですが、多用するとSEO的に好ましくない結果になる可能性があります。

使用例

円盤形

世界中で昔から目撃されている、もっとも一般的なポピュラーな形です。この中でも楕円型や平皿型など、多少のバリエーションがあるようです。

アダムスキー型
葉巻型
球型

項目

パーツを配置して最初に設定が開いた状態で「項目1」のみが表示されています。「項目追加」ボタンを押すことで、「項目2」「項目3」と設定リストが追加されて現れますので、必要なだけ表示させる項目をエリア内に追加できます。

設定が終わった項目は、右にあるファイルマークを押して複製することができます。さらに複数の項目がある場合に現れる十字マークをドラッグアンドドロップすると表示の順序の入れ替えができます。不要なものは「X」マークをクリックすれば削除されます。

項目1 〜

項目ごとに、右側の「項目編集」をクリックすることで、「項目を追加・編集」が切り替わりで開きますので、内容を記入します。

タブ切替表示の追加画面

各項目ごとに、個別に見出しと内容文を記載していきます。

ラベル

この項目の見出しやタイトルを入れます。

内容

表示させたい説明文や記事などを入力します。「文章編集欄」パーツと同じ仕様になっていますので、ワープロのように文字のサイズや色の調整も行えます。

スタイル

配置

  • 水平 → タブラベルがエリア上部に水平方向に並びます。それぞれのタブをクリックすると内容が下部に表示されます。
  • 垂直 → タブラベルがエリア左側に縦に並びます。タブをクリックすると右側に内容が表示されます。

境界線の色

各項目を分かりやすくするために設けられた枠線の色を設定します。

詳細

こちらの共通ページで説明しています

©2015-2018 eufonia inc.