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

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

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

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

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

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

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

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

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

詳細はこちらのページをご覧ください。

『レイアウト設定』で「画像＋テキスト縦並び（1列）」もしくは「画像＋テキスト縦並び（1列・互い違い）」を選択した場合、SIRIUS2の設定では画像やテキストの周りには余白が設定されてます。

テキストエリアの背景色が透明（白）の場合は余白はさほど気になりません。しかしながら上の画像のように＜画像レイアウト＞側の設定で色を付けた場合、余白が少々気になるところです。

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

画像拡大表示

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

これを＜画像レイアウト＞で出力した独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることでブラウザの端いっぱいまで画像やテキストエリアを表示することができます。（※PC及びタブレット表示時）
（※こちらも余白なしの設定にしてあります）

※下のキャプチャ画像は先の画像との違いがわかりにくいですがブラウザ幅いっぱいに表示されたものです。

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

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

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

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

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

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

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

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

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

背景色付きタイプ

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

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

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