<画像レイアウト>に追加機能-Volar2

<画像レイアウト>に追加機能-Volar2

SIRIUS2テンプレート【Volar2】では標準機能の<画像レイアウト>に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。

アイキャッチ画像

当サイトで使用しているキャプチャ画像は(【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。

 

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


コンテンツの表示幅解消機能

<画像レイアウト>で”横並び”レイアウトを指定すると「コンテンツの横並び表示」(※PC&タブレット)ができます。

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

 

キャプチャ画像

 

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

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

 

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

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

 

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

<div class="xxx">[% imgLayout(※画像レイアウト・管理名) %]</div>

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

xxx」は”便宜上”のクラス名です。(マニュアルに実際のクラス名を記載)

画像拡大表示

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

 

キャプチャ画像

 

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

 

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

基本的には1カラムページでの運用になります。(2カラムではあまり意味を成しません)

またある程度画像の横幅が大きくないとこのレイアウトにはなりません。

 

画像は常に100%サイズで表示されるので、ブラウザを広げるとテキストエリアが広がる仕様です。

余白なし交互表示

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

 

背景色付き

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

サイト管理人

筆者

 

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

 

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

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

 

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

先でご紹介したスマホでの”端数”処理機能や【Volar2】独自の余白なども適用されます。

 

SIRIUS2標準機能でも背景色の設定は可能ですが、【Volar2】の設定だとテキストを左寄せにしても見出しは中央寄せのままになります。

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

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

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

 

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

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

 

背景色付きタイプ

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

<画像レイアウト>標準機能でも背景色は付けられますが、【Volar2】のコードで囲んでやると薄い透過(※不透明度0.9)が付いた淡いグレーでの背景(固定色)になります。

スマホでの”端数”処理機能や【Volar2】独自の余白なども適用されます。

 

テキストを左寄せにしても見出しは中央寄せのままです。

シンプル版

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

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

 

画像がない代わりに見出しには背景色を設定。

また画像がないので全体に枠を設定してあります。ただし背景色は設定してません。

(標準設定で背景色を指定すれば反映はされます)

 

テキストを左寄せにしても見出しは中央寄せのままです。

見出し背景色は「緑系・赤系・黒系」をデフォルトでご用意。