サンプルページ【1カラムワイド】
PCでは画像やボタンリンクを表示させてますが、画面が小さいスマホ（※タブレット含む）では画像とボタンリンクを非表示にする設定を加えてあります。
＜画像レイアウト＞余白なし交互表示
- 画像の端がくっつく余白なしのバージョン。（PCおよびタブレット）
- 『レイアウト（PC）』にて「画像＋テキスト縦並び（1列・互い違い）」選択時のみ有効。
- スマホではSIRIUS2デフォルト設定での表示。（縦並び表示）
- 各画像横のテキストエリアには薄めの背景色を交互に設定中。（変更可）
※PCでの表示例↓
テキストの量が多いと画像の高さ次第では余白が生じる場合があります。
ちなみにこちらはタブレットでの表示例。
（※1列表示のスマホでは無関係）
これを自動で解消する方法は現段階では難しいです。
ただし画像の高さを増やせば解消はするので気になる方は画像の修正での対応をお願いします。
＜画像レイアウト＞背景色付き
- テキストエリアに背景色（淡いグレー）を設定したタイプ。
- 標準機能でも背景色の設定は可能だが、こちらの設定ではテキストを左寄せにしても見出しは中央寄せのまま。
- ＜画像レイアウト＞独自タグをこちらで用意した専用クラスで囲むだけで表示可。
＜画像レイアウト＞シンプル
- 画像なし、見出しに背景色、枠のみタイプ。
- ＜画像レイアウト＞独自タグをこちらで用意した専用クラスで囲むだけで表示可。
- 見出し背景色は「緑系・赤系・黒系」をデフォルトでご用意。スタイルシート上で色変更可。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
＜画像レイアウト＞画像（小）枠付き
- アイコン風画像の背景色（白）付きタイプ。
- ＜画像レイアウト＞独自タグをこちらで用意した専用クラスで囲むだけで表示可。
＜口コミ＞人物紹介タイプ
- ＜口コミ＞独自タグをこちらで用意した専用クラスで囲むだけで表示可。
- ”ワイド”タイプは縦長画像と右横にテキストエリアの1カラム表示。
（タブレットとスマホでは1列縦並び表示） - ”ノーマル”タイプは画像とテキストエリアの縦並び＆2カラム表示。（PC及びタブレット）
（スマホでは1列縦並び表示）
ワイド
加納岬（ディレクター）
女性 / 20代
1歩1歩確実に
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
伊集院けい（総務）
女性 / 30代
時には歩みを止めて
この文章はダミーです。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
※PCでの表示例↓
ノーマル
加納岬（ディレクター）
女性 / 20代
1歩1歩確実に
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
伊集院けい（総務）
女性 / 30代
時には歩みを止めて
この文章はダミーです。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
※PCでの表示例↓
【Volar2】オリジナルバナー
- 大きさの違いで3タイプのバナー画像エリアを用意。（リンク付き）
- こちらで用意したHTML文内に画像挿入で画像を指定＆テキスト記述するだけで表示可。
バナー（小）
- 2～5個まで設置可能。画像幅及び画像間の余白は個数に応じて自動調整。（PC）
画像を暗くするオプション付き。 - スマホでは1列縦表示。
- テキストカラーは白固定。（変更も一応可能）
※2個バージョン
※PCでの表示例↓
バナー（中）
- 2～5個まで設置可。画像幅は個数に応じて自動調整。（PC）
画像を暗くするオプション付き。 - 画像は余白なしの接着表示。
- タブレットでは固定幅で列数は自動調整。スマホでは1列縦表示。
- テキストカラーは白固定。
※2個バージョン
※PCでの表示例↓
※タブレットでの表示例↓
※タブレットでの表示例↓
バナー（大）
- 横幅はフルワイドで固定。画像を暗くするオプション付き。
- 縦にいくつでも増やせる。画像間の空きはなく余白なしの接着表示。
- テキストカラーは白固定。
