＜画像レイアウト＞に追加機能-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】で用意した専用クラスで囲むだけで表示できます。