LinksbaseデザイナーのYukino

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

マスターすれば、静的で物足りなかったページが、動きのあるおしゃれなページに生まれ変わりますよ!
それでは早速やってみましょう〜!
 

用意するもの

  • HTMLエディタ
  • 背景用の画像3枚

スクロールしたくなるデモ

百聞は一見に如かず!
実際どんな風になるのかお見せします。
なんだか楽しくてずっと上下にスクロールしたくなりませんか?

See the Pen background-attachment by Yukino Watanabe (@yukino0on) on CodePen.

マーケティング的 背景固定のメリット

カーテンが上がっていく感じ。
と表現する人もいますね!

文字は通常通り動いていくのに、背景が固まっています。
これをマーケティング的に見ると、伝えたいことに集中させられる
というのがメリットじゃないかなと思います。

文字をあえて少なくすることで、「なになに?次は?」というワクワクを掻き立てられます。
つまり、スクロールしてどんどんのめりこませて行くLP(ランディングページ)でも有効な手法ではないでしょうか。

「リバウンド繰り返していませんか?」
「実はそれ、あなたは悪くないんです。」
「XXなら、痩せたあと体重をキープできる!」
みたいな感じですね。

デモでも一応そんな風に書いてみました。
99%の人が自分のヒジを舐められない。
でもそれを知った90%の人が試しに舐めようとする。
らしいですよ。

すごく前のビデオですが、アメリカにいた時に面白い子どもの本があって、そこに書いてありました。
よかったらみて見てください。

にしても画質悪い。
当時は綺麗だと思っていたけど。たった5年でここまで進化するんですね・・。




HTML/CSSコーディング

ではやり方です!
HTMLとCSSそれぞれ見ていきます。

シンプルなHTMLでOK

今回は、箱が3つのHTMLにしました。
それぞれの箱に言葉が入っています。
これ以上説明のしようがない・・というくらい簡単な構造です。笑

クラスは、固定させたい背景を持つdiv要素に.fixedをつけています。
それぞれのdivの背景を別々の画像にしたいので、それぞれに.bg1, .bg2, .bg3というクラスをつけます。

background-attachmentで背景を固定できる

続いてCSSです。

先ほどのクラスに対して、それぞれ違う背景をbackground-imageで指定します。

ここまでは一緒ですね!
はい、ここが魔法です!笑

固定させたい背景のdivに.fixedクラスをつけたので、この子たちに
background-attachment: fixed;

というCSSを使ってあげます。
たったこれだけ。
あとは、見栄えをよくするために

  • 背景をいっぱいに表示させる
  • 高さを指定
  • 文字を真ん中に

というような感じで整えてあります。
ぜひ使ってみてくださいね!

スマホ(iOS)では表示されない・・!!

さて、このとっても簡単に背景を固定させるbackground-attachmentというCSS。

残念なお知らせです。このCSSはiOSが未対応です。

スクロールの効果がより期待できるのはスマホなんですが、iOSではいつもと変わらず背景が動いていってしまいます。
ただ。

ご安心ください。
ちゃんと裏ワザがあります。
擬似クラスというのを使うのですが、これはまた別の記事で解説したいと思います。

LinksbaseデザイナーのYukino

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

おしゃれサイト制作ならLinksbase

Linksbase(リンクスベイス)は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています!
女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。

モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。
ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか?

Share This