LightningでLGT全幅見出しを使って全幅パララックスのデザインを実装するCSS－１カラムトップページがオシャレに－【コピペ＆カスタマイズ】

2019年9月12日2019年12月20日テーマ-Lightningのカスタマイズ＆設定

Lightningにはデザインが簡単になるウィジェットが沢山あります。

全幅のトップページスライドショーとLTG全幅見出しを使うだけで、全幅のパララックス風ページが作成できます。

使いこなして綺麗なデザインにするにはちょっとだけ調整が必要なので、
調整用のCSSを紹介します。

Lightningでパララックス風全幅トップページを作るには？

Ligntningでは、LTG全幅見出しを使うことによって背景画像がゆっくりとスクロールし、コンテンツが通常の速度でスクロールするパララックス効果を使うことができます。

見た方が速いので、サンプルサイトをご覧ください。　

サンプルサイトのパララックス風全幅トップページ

二つ目の背景画像つきコンテンツまでが、Ligntningのウィジェットで作ったパララックスです。

(それ以降はさやっと。がHTMLコードを書いて作成したもの。)

まずはトップページを１カラムにします。

外観のカスタマイズでLightningデザイン設定に移動し、Lightningサイドバー設定でトップページを1カラムにするにチェックを入れます。

次にパララックスにするトップページのコンテンツを作っていきます。

このページで作ったパララックスはトップページコンテンツエリア上部にウィジェットを並べることで作成しています。

①通常のウィジェット(表示したいものなんでも良い)

②LTG全幅見出し

③通常のウィジェット

④LTG全幅見出し

という順番で、全幅見出しとコンテンツを交互に並べることでパララックスの効果を全幅用に利用したものです。

自分が使いたいウィジェットをまずは追加してから、CSSをカスタマイズしていきましょう。

パララックスを綺麗に見せるコツは、通常のウィジェットの縦幅をあまり大きくし過ぎないことです。

LTG全幅見出しの間に挟むウィジェットは、大体画面で見える縦幅くらいに抑えると良いでしょう。

Lightningの全幅見出しをCSSカスタマイズで調整する

もしウィジェットを追加してデザインを確認したとき
パララックス出来た！という満足な出来になっていればそのまま使用してもいいです。

あれ？思うようにいかないな
と思った方は次のCSSをコピペして調整してください。

LTG全幅見出しのコンテンツが少ない場合

LTG全幅見出しをそのまま使ったときに、中身のコンテンツが２行で納まってしまうと背景画像があまり見えないのでパララックスが目立ちません。

これでは、「あれ？画像動いた？」と思ったときには次のコンテンツに目が行っている状態です。

ページ全体をパララックスでできた全幅ページに見せるには、背景画像のスペースをしっかり確保しなければなりません。

/* 全幅見出しの文章量が少なくてもパララックスさせる */
.widget_ltg_adv_full_wide_title_outer, .widget_ltg_full_wide_title_outer{
padding:12em 10em;
}
/* 全幅見出しのレスポンシブル */
/* 小さいデバイス */
@media screen and (max-width:798px){
.widget_ltg_adv_full_wide_title_outer, .widget_ltg_full_wide_title_outer{
padding:12em 3em;
}
}
/* スマホ */
@media screen and (max-width:667px){
.widget_ltg_adv_full_wide_title_outer, .widget_ltg_full_wide_title_outer{
padding:7em 15px;
}
}

文章の量と見せたい背景画像の範囲よってpaddingの数字は調整してください。

１つ目の数字が縦のスペース、２つ目の数字が横のスペースです。

大体画面で見える縦幅と同じくらいに縦のスペースを設定すると綺麗に見えます。

横のスペースはすべてのサイズで15pxにしてしまっても構わないのですが、あまりに大きな画面サイズのときにダラダラと横に広がった文章になってしまうことと、
全幅見出し以外のコンテンツとあまりにも目線が動く範囲が違うと疲れるため、
大体見やすいくらいの幅に収まるように横のスペースを調整しましょう。

画像の上で文字が見えづらい

背景に使う画像によっては、文字色をどうやっても読みにくくなってしまうことがあります。

画像を調整して文字を読みやすくすればよいのですが、画像を重視している場合は文字に半透明の背景色を付けて見やすくしましょう。

/* 全幅見出しに色を重ねる */
.widget_ltg_full_wide_title_title,.widget_ltg_full_wide_title_caption{
background-color:rgba(255,234,237,0.8);
margin:0;
}
.widget_ltg_full_wide_title_title{
padding:1em 1em 0em;
}
.widget_ltg_full_wide_title_caption{
padding:1em 1em 2em;
}

１つ目の｛｝で背景色を付けています。
rgbaという色コードを使うと背景透過させて色を表示することができます。

自分が使っている色をrgbaに変換するにはウェブ上で使える変換ツールを使いましょう。

RGBと16進数カラーコードの相互変換ツール – PEKO STEP

４つ目の数字が背景をどれくらい透過させるかの数字です。

読みやすいように調整しましょう。

２つ目の｛｝でタイトルの背景の余白

３つ目の｛｝でテキストの背景の余白を指定しています。

タイトルやテキストのデザインはborder-radiusなどを使って丸くしてみたりborderを付けてみても良いかもしれません。

通常の見出しデザインのようにカスタマイズできます。

通常のウィジェットに背景を付ける

サンプルサイトではCSSコードを紹介できればそれ良いので色には配慮しておらず、ごちゃついたデザインになっていますが、

実際に自分のサイトを作るときは画像とその他の色はうまく調和された方が良いでしょう。

その際に、通常のウィジェットの背景を白ではなく他の色にした方が良い時もあります。

.home .section.siteContent{
background-color:#ffeaed;
}

これでトップページの背景の色が変わります。

ページ全体の背景の色が変わってしまうので注意。

全幅見出しに挟まれたコンテンツの背景のみ変えたい場合、
ウィジェットのdivなどを指定して背景を変えると全幅デザインには見えなくなってしまいます。

それぞれのウィジェットで背景を変えたい場合では、ウィジェットを全幅にする必要があるので、ウィジェットを全幅にする解説記事をご覧ください。

これだけで難しいコードを使わなくてもオシャレな全幅トップページに

パララックスのデザインを使っているだけで一気に素人感が抜けたオシャレなサイトになります。

パララックスを自分で作ろうとするとCSSが複雑な上にJavaScriptを使わなければならないこともあります。

それが上記の調整だけでパララックスにできるなんて驚きです。

素人が素人とバレないサイト作りにぴったりはLightningはやっぱりおススメです。