背景を左右にぶち抜く

JIMDO上級者向けのテクニック

カラムの本来の使い方とは、異なる使い方をして今風のデザインを作る方法を解説します。

Jimdoの場合、ページ内に複数の情報がある場合、関連する情報ごとに上下方向のメリハリをつける目的で、水平線などを利用する人が多いかもしれません。


決して、今に始まったことではありませんが、レスポンシブWEBデザインが主流になってから、左右ぶち抜きで異なる背景色をつけることで、関連情報をまとめるという手法がよく使用されるようになってきています。

JIMDOのクリエイターテンプレートで最大幅が決まっている場合は、左右ぶち抜き(などと呼ばれますがww)で、背景色をつけるのは、基本的な機能にありませんので、あきらめていた方も多いと思います。

そこで、冒頭で書かせていただいた通り、今日は、カラムを本来の利用方法とは異なる方法を使用して左右ぶち抜きのデザインを作る方法をご紹介します。


使用上の注意
異なる関連するコンテンツをまとめるときに使用するのが主な目的ですから、面白がって多様すると、訪問者がうるさがるかもしれません。利用するのであれば、トップページ(indexページ[目次ページ])などに限定するなど用途を絞って利用するようにすることをお勧めします。

コンテンツを背景色でまとめる

このように背景を変えることで、
上下方向とは異なる関連情報であることを
一目でわかるようにすることができます。

ただし、少し高度なテクニックが必要になります。


上とは異なるコンテンツ

CSS

<style>
.cc-pagemode-default #cc-m-11594119321{   /* j-hgridを探す */

        background:#b0c4de;

        padding:60px 20px !important;

        width:100vw;

        margin-left:calc((-100vw + 100%) / 2);

        min-height:100vh;

        box-sizing:border-box;

    }
</style>

見出し中

文章を入れる


※注)上記CSSの緑色の部分を書き換えなくては反映されません!!

参考資料:原色大辞典

Service 1

Consectetur adipiscing elit. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur.

Service 2

Mihi quidem Antiochum, quem audis, satis belle videris attendere. Hanc igitur quoque transfer in animum dirigentes.

Service 3

Tamen a proposito, inquam, aberramus. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem.