ブロックパターン

Evergreenスキンには、あえて背景をずらしたオフセット背景が指定できるブロックパターンを搭載しております。
お好みのパターンを自由に配置して、オリジナルのコンテンツを作成してください。

Evergreenのブロックパターンの種類

「Lightning G3 Evergreen」には、独自のブロックパターン5種（2021年9月現在）を含んでいます。
コンテンツ作成の際にぜひご利用ください。

※幅は全幅専用のブロックパターンになります。そのためLightningデザイン設定→レイアウト設定は「1カラム」のページに配置してください。2カラムだと崩れた表示になります。

簡単カスタマイズ

実績紹介 オフセット背景 余白右 5%
(スマホサイズ以下で余白0)

実績紹介 オフセット背景 余白左 5%
(スマホサイズ以下で余白0)

サービスの流れ グリッドカラム オフセット背景 余白右 5%(スマホサイズ以下で余白0)

サービスの流れ グリッドカラム オフセット背景 余白左 5%(スマホサイズ以下で余白0)

サービスの流れ グリッドカラム

※オフセット背景しないパターン

オフセット背景のブロックパターンを配置してから、高度な設定の「追加 CSS クラス」のクラス名を変更するだけで、余白の向きや余白の空きが変更できます。

以下の表は、オフセット背景のクラス名をまとめた表になります。オフセット背景には、すでに以下のいずれかのクラス名がついております。そのクラス名を変更すると、余白の左右の向きや余白の大きさが変更できます。

オフセット背景

装飾指定一覧表

クラス名	説明
vk-bg-offset	［オフセット背景の親ブロックに付与］オフセット背景の外側の要素につけるクラス名で、基準の位置になります。(position:relative;)
vk-bg-offset-bg	［オフセット背景に付与］vk-bg-offsetがついている親ブロックを基準の位置にして、配置されます（position:absolute;）
vk-bg-offset-bg--right	［オフセット背景に付与］余白の向きの指定で、右側に余白が空きます
vk-bg-offset-bg--left	［オフセット背景に付与］余白の向きの指定で、左側に余白が空きます
vk-bg-offset-bg--45	［オフセット背景に付与］余白の大きさの指定で、45%の余白が空きます
vk-bg-offset-bg--40	［オフセット背景に付与］余白の大きさの指定で、40%の余白が空きます
vk-bg-offset-bg--35	［オフセット背景に付与］余白の大きさの指定で、35%の余白が空きます
vk-bg-offset-bg--30	［オフセット背景に付与］余白の大きさの指定で、30%の余白が空きます
vk-bg-offset-bg--25	［オフセット背景に付与］余白の大きさの指定で、25%の余白が空きます
vk-bg-offset-bg--20	［オフセット背景に付与］余白の大きさの指定で、20%の余白が空きます
vk-bg-offset-bg--15	［オフセット背景に付与］余白の大きさの指定で、15%の余白が空きます
vk-bg-offset-bg--10	［オフセット背景に付与］余白の大きさの指定で、10%の余白が空きます
vk-bg-offset-bg--5	［オフセット背景に付与］余白の大きさの指定で、5%の余白が空きます
vk-bg-offset-bg--no-offset-tablet	［オフセット背景に付与］余白をタブレットサイズ以下（991.98px以下）では無しにします
vk-bg-offset-bg--no-offset-mobile	［オフセット背景に付与］余白をスマホサイズ以下（575.98px以下）では無しにします

クラス名を変更して余白の大きさを変更してみよう

mobileサイズ以下で余白0のブロックパターンを、mobileサイズ以下でも余白ありにしてみよう