検索結果

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【パーツ】→＜タブコンテンツ＞ではタイトル欄と内容欄に入力するだけで、美しいレイアウトのタブ分けコンテンツが簡単に作成できます。ただ一部のデザインを除いてはボーダー（境界線）が表示されないので、どこからどこまでがタブコンテンツの内容なのかがちょっとわかりにくい印象も受けました。そこでタブコンテンツにボーダーをつけることで明示的に”このエリアがタブコンテンツです”と印象付けるスタイルを用意してみました。※＜タブコンテンツ＞についてはこちらの記事をご参照ください。タブコンテンツSIRIUS2の＜タブコンテンツ＞についての詳細ページ。レイアウトの違いたとえば下のようなサンプルを用意してみました。タブコンテンツのオプションでは「デザイン2」を選択してます。ここからがサンプルコンテンツここでは3つの天然水の”風味”についてご紹介します。3つの天然水を飲みやすさという点で比較すると下のような評価になるでしょう。天然水AAは従来からある◯◯の主力天然水で、霊峰・富士山が水源です。ミネラル成分がバランスよく含まれ、自然の味わいがいい具合に感じられる天然水です。初めて天然水を味わうならAから始めるといいでしょう。天然水B成分表をご覧になれば一目瞭然ですが、Bはミネラルが他の天然水に較べてかなり豊富です。硬度も高めなのでBはどちらかというとミネラル成分を味わったり水の味を楽しみたい方向けの天然水と言えます。また美容と健康に深い関係があると言われるバナジウムがAのおよそ2倍含まれてるのも大きな特徴と言えます。天然水C一方Cはミネラル成分が3つの天然水の中で一番低く、言い換えれば飲む人を選ばず口当たりのよいとても飲みやすい天然水と言えます。◯◯が採用しているウォーターパック（水パック）は7.2㍑軽量ウォーターパック。女性やお年寄りでも取扱いに困ることのない軽量パックです。ここまでがサンプルコンテンツ（ここからがこのページの本文です）よく見ればタブコンテンツの左右に若干の余白があるのでなんとなくはタブコンテンツがどこからどこまでかはわかるかもしれません。しかしながらそのまま目を落としていくと、「◯◯が採用しているウォーターパック…」までつい読み進めてしまいそうじゃないですか。でもそこはタブコンテンツの中身ではなく通常の本文エリアなので、そうなると途中で文章がつながらなくなって「あれ、どこまでがタブの内容なんだ？」ということにもなりかねないかと。まあ考えすぎかもしれませんが、筆者個人としてはタブコンテンツを囲むようにボーダーがあった方がそのコンテンツの内容がどこまでなのかがひと目でがわかって親切だと思うんです。そこで【Volar2】ではタブコンテンツの内容の下限がどこまでなのかをわかりやすくするため、”囲い”のようなボーダーがつくスタイルを別途用意しました。「デザイン1」だけは最初からボーダーが付いてます。しかしながらボーダーが若干太くて目立ちすぎなので少し柔らかめのボーダーに変えるスタイルにしてみました。あとボーダー（境界線）色は固定です。有効化この機能はデフォルトでは無効化されてます。有効化のやり方《タブコンテンツにボーダー》を利用するには、「デザイン1」ならモジュール『【Volar2】タブ（デザイン1）』、「デザイン2」ならモジュール『【Volar2】タブ（デザイン2）』、「デザイン3」か「デザイン4」ならモジュール『【Volar2】タブ（デザイン3,4）』のいずれかの［有効］のチェックをONにします。トップページとエントリーページでのみ有効です。また両テンプレート共通で変更となります。

当サイトで使用しているキャプチャ画像は（【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】仕様ここまでご紹介したデザイン2～4に関しては左右及び下限のボーダー（境界線）がありません。筆者画像の周囲についてる境界線（枠線）はサイト側で付けてるものですこれだとタブコンテンツの中身がどこで終了なのかがわかりにくいケースもありそうです。そこで【Volar2】では枠線を付けたスタイルもご用意してみました。概要は＜タブコンテンツ＞にボーダーをご覧ください。