＜画像レイアウト＞に追加機能-Volar2

パーツ＜画像レイアウト＞に追加搭載した【Volar2】独自の機能をご紹介します。

＜画像レイアウト＞で”横並び”レイアウトを指定すると「コンテンツの横並び表示」（※PC＆タブレット）ができます。

ただし1段目と2段目で異なるコンテンツ表示数にしてると1段目と2段目のコンテンツの表示幅が異なってしまいます。

 

 

原因はコンテンツ幅が自動的に表示領域いっぱいに広がる設定のためです。

これはコンテンツ数の多い方の数に合わせて空のコンテンツを足せばPC上のレイアウト崩れは解消します。

 

しかしスマホで見た時には足した空のコンテンツ分だけ余計な空きが生じてしまいます。

これを解消するコード（クラス）を【Volar2】ではご用意してます。

 

＜画像レイアウト＞で出力した独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることで、余計な空きがなくなります。（※PC及びタブレット表示時）

詳細をこちらのページでご確認できます。

画像拡大表示

『レイアウト設定』で「画像＋テキスト縦並び（1列・互い違い）」を選択した場合、SIRIUS2の設定では画像は枠内に収まって縮小表示されます。

 

 

これを＜画像レイアウト＞で出力した独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることでブラウザの端まで画像を表示するレイアウトが可能になります。（※PC及びタブレット表示時）

 

詳細をこちらのページでご確認できます。

デモはこちらのページでご覧になれます。

＜画像レイアウト＞のレイアウト設定で「画像＋テキスト縦並び（1列・互い違い）」を選んだ際、独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることで、”余白なし交互表示”でのレイアウトが可能になります。（※PC及びタブレット表示時）

 

デモは【＜画像レイアウト＞余白なし交互表示】でご覧になれます。

『レイアウト設定』でデフォルトの「横並び」を選択した際、テキストエリアは透明の背景になります。

（通常はページ全体に白の背景色が敷かれてるので実感はわかないと思います）

 

しかしながら1カラムページなどで記事ブロック全体の背景に画像を指定するとテキストエリアの背景が透過するためテキストが読みにくくなるケースもあります。

そんな時用にテキストエリアの背景に淡いグレーの背景色を設定したタイプもご用意しました。

 

こちらも【Volar2】が用意している専用のクラスで囲むだけです。

 

デモが＜画像レイアウト＞背景色付きでご覧になれます。

アイコン風画像と見出しのみのレイアウト

＜画像レイアウト＞機能を使った”アイコン風画像と見出しのみ”の機能も用意してあります。

（当サイトのトップページ『SIRIUS2の新機能（その他）』で実際の表示（デモ）がご覧になれます。

 

『レイアウト設定』で画像と見出しのみの入力で、レイアウトはデフォルトの「横並び」でOK。

こちらも【Volar2】が用意している専用のクラスで囲むだけです。

 

背景色付きタイプ

＜アイコン風画像と見出しのみのレイアウト＞は背景が透過するタイプですが、【Volar2】で用意している別のクラスで囲むと自動で淡いグレーの背景色が付いた状態でコンテンツを表示できます。

 

デモが＜画像レイアウト＞画像（小）枠付きでご覧になれます。

こちらは見出しとコンテンツ（説明文）だけのシンプルなレイアウト表示で,
「画像なし、見出しに背景色、枠のみ」タイプ。

これまで同様、独自タグを【Volar2】で用意した専用クラスで囲むだけで表示できます。

 

デモがこちらのページでご覧になれます。