【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。
そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。
また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。
パーツ＜タブコンテンツ＞は、「そのまま表示させるとページがむやみに長くなってしまうのを避けたい」ときとかに複数のコンテンツをタブ形式で分けることですっきりコンパクトに表示することができる機能です。
＜タブコンテンツ＞の設定画面を開くには、
【パーツ】→＜タブコンテンツ＞→【タブコンテンツの管理】→【追加】
もしくは
【パーツ】→＜タブコンテンツ＞→【タブコンテンツの追加】
から開けます。
こちらが今回のサンプルコンテンツ画面になります。
（※デフォルトデザイン＆デフォルトカラーにて作成）
すでにいくつか設定済みの画面でご説明していきます。
縮小版
- ①タブのタイトル
-
タブ上に表示させるテキストです。
- ②アイコン画像
-
テキスト前にワンポイント的なアイコンを設置できます。
サンプルではコンテンツ2とコンテンツ3にアイコン画像を表示させてみました。
ただしスマホだとアイコン画像はかなり小さくてバランスが悪く、それなのにそこそこのスペースを消費しているのでテキストが読みにくくなります。
（タブ1のみアイコン無しの設定）
- ③コンテンツエリア
-
各タブ内に表示させたいコンテンツはここに書きます。
通常の編集画面と同じで、仕様上は<P>タグ改行になります。
- ④順番入れ替え及び表示・非表示
-
三角の左右アイコンがタブの順番入れ替え（位置変更）でプラス・マイナスアイコンが表示・表示切り替えになります。
非表示にする場合は右から順に消えていきます。逆に表示に戻す場合は右端から再表示になります。
（非表示にしても内容は残ってます＆タブ数は最大5つ）
- ⑤表示タブ
-
現在は3つのタブが表示中。
各タブごとにタイトルやコンテンツを記述していきます。
ただスマホでの表示を考えると（タイトルテキストの分量にもよりますが）3～4個が限界かもしれません。
同ページ内でタブコンテンツの複数表示は不可です。
設定を完了させて「OK」をクリックすると管理IDの入力画面が表示されます。
（新規作成時のみ）
好きな名前で登録したら設定終了です。
登録が完了すると記事内にタブコンテンツ用の独自タグが挿入されます。
（実際の表示はブラウザで確認する必要があります）
タブコンテンツの修正は独自タグをダブルクリックするか、パーツ→【タブコンテンツ】→【タブコンテンツの管理】から目的のタブコンテンツを選択して「編集」をクリックでもイケます。
パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、（ブラウザ or内蔵）プレビューでの表示チェックが不可欠になります。
表示デザイン＆配色
オプションタブではタブのデザインと配色が選択できます。
タブの表示デザイン
表示デザインは4種類（5種類？）用意されてます。
SIRIUS2の設定画面では通常デフォルト設定はオプション設定の一番最初が割り当てられてることが多いんです。
たとえばこちらは＜レイアウト設定＞の設定画面ですが、デフォルト（横並び）と横並び（1行）は同じデザインです。
しかしながらタブコンテンツに関してはデザイン1～4のほかに”デフォルト”という設定があるんです。
この”デフォルト”設定、デザイン1とは少しだけ異なってるのでこのページでは”5種類（？）”という書き方にしてあります。
（公式サイトのマニュアルは4種類となってるもので…）
では各デザインの違いを見ていきます。
デフォルト
タブテキストの下に（設定色で）ボーダーが表示されるデザインです。
アクティブなタブは背景色が設定色で塗りつぶされます。
デザイン1
コンテンツ全体をボーダーが囲むデザインです。
（コンテンツの周囲にボーダーが付くデザインはこれのみ）
アクティブなタブは背景色が設定色で塗りつぶされます。
デザイン2
アクティブなタブの下だけにボーダーが表示されるシンプルなデザインです。
デザイン3
タブが角丸になったデザインです。
ボーダーはなし。
デザイン4
アクティブなタブの上部にボーダーが表示されるデザインです。
その他のタブには淡い色の背景色が付きます。
角丸
『角丸』をONにするとタブが角丸になります。
ただこの差がわかりやすいのはデフォルトとデザイン1のみで、デザイン3とデザイン4はどう変わってるのかよくわかりません。
（デザイン2はそもそもボーダーがないので『角丸』の対象外です）
タブの配色
タブの配色は16種類用意されてます。
こちらは「レッド」を指定したケース。
『淡色』を指定するとちょっと穏やかな色合いになります。
（下のサンプルは「レッド」の淡色）
【Volar2】のレイアウトデザイン
筆者個人としてはコンテンツを囲むようにボーダーがあった方がそのコンテンツの内容がどこまでなのかがひと目でがわかって親切だと思うんです。
そうでないと知らず知らずのうちにタブコンテンツからそのまま通常の本文に目が行ってしまい、途中で文章がつながらなくなって「あれ、どこまでがタブの内容なんだ？」ということにもなりかねません。
たとえば下のサンプルコンテンツ。
タブコンテンツの左右に若干余白があるのでなんとなくは別ブロックとわかるかもしれませんが、それぞれのタブコンテンツの中身がどこまでなのかがひと目ではちょっとわかりにくく、ついそのまま「◯◯が採用している...」まで読み進めてしまいがちです。
ここからサンプルコンテンツ
ここでは3つの天然水の”風味”についてご紹介します。
3つの天然水を飲みやすさという点で比較すると下のような評価になるでしょう。
Aは従来からある◯◯の主力天然水で、霊峰・富士山が水源です。
ミネラル成分がバランスよく含まれ、自然の味わいがいい具合に感じられる天然水です。
初めて天然水を味わうならAから始めるといいでしょう。
成分表をご覧になれば一目瞭然ですが、Bはミネラルが他の天然水に較べてかなり豊富です。
硬度も高めなのでBはどちらかというとミネラル成分を味わったり水の味を楽しみたい方向けの天然水と言えます。
また美容と健康に深い関係があると言われるバナジウムがAのおよそ2倍含まれてるのも大きな特徴と言えます。
一方Cはミネラル成分が3つの天然水の中で一番低く、言い換えれば飲む人を選ばず口当たりのよいとても飲みやすい天然水と言えます。
◯◯が採用しているウォーターパック（水パック）は7.2㍑軽量ウォーターパック。
女性やお年寄りでも取扱いに困ることのない軽量パックです。
ここまでがサンプルコンテンツ
（ここからこのページの本文です）
”行き過ぎた”と気がついた時点でちょっと戻ってタブ「天然水B」やタブ「天然水C」をクリックしても今度は「どこまでが天然水Bの内容なんだろう？」と余計なことを考えながら読み進めるハメにもなりそうです。
そこで【Volar2】ではタブコンテンツの内容の下限がどこまでなのかをわかりやすくするため、デザイン2～デザイン4まで”囲い”のようなボーダーがつくスタイルを別途用意しました。
（デフォルトデザインだけそのままボーダー無しです）
※囲みボーダーはカラーコード：#dddで固定です。
この機能はデフォルトでは無効化されてます。
ユーザー指定スタイル内に【Volar2】タブコンテンツ専用のスタイルを用意してます。
そのスタイルの先頭と後尾のコメントアウトを解除するだけで機能は有効化されます。
