背景を使いこなす

次の動画(1分53秒)を見ながら、実際にWebreakを操作し、

  1. 各ボックスの背景を設定する方法
  2. レイヤーの設定方法
  3. 背景を固定にした場合の、デザインの見た目の変化

の3つの動作を確認してください。

背景の仕組み

各ボックスごとに、背景を設定でき、各ボックスの背景は、4つの層(レイヤ)でできています。

  1. 下地レイヤー
  2. 特殊効果レイヤー
  3. 特殊効果レイヤー
  4. 特殊効果レイヤー

bg-structure

下地レイヤーは設定が必須で、特殊効果レイヤーは任意に設定できます。 また、背景を固定させることで、視差効果(パララックス)を実装することもできます。

1. 各ボックスの背景を設定する方法

各ボックスの左にある背景設定ボタンをクリックすると、指定したボックスの背景を変更するための画面が表示されます。

bg-btn

2. レイヤーの設定方法

下地を決める

背景のベースとなる下地を指定します。
ここで、背景全面写真やグラデーションを選択できます。

特殊効果を決める

様々な特殊効果を背景で表現できます。
- アスファルト
- 斜線
- 木目

3. 背景を固定にした場合の、デザインの見た目の変化

背景固定をONにすると、背景画像がマウスのスクロールに連動せずに画面に固定されて表示されるようになります。 これを視差効果(パララックス)と呼びます。 オシャレなサイト演出のため、よく使われる技術です。

下地を写真に設定し、背景固定をONにしたボックスを2つならべると、同じ背景を異なるボックスで共有することができます。 この背景設定を使いこなしてくると、オシャレなホームページが作れるようになってきます。

その他、開発情報など

ここでご紹介した「背景設定」機能は、サービスの提供を開始したのが2016年11月です。 特に、特殊効果レイヤーでご利用いただけるパターンが、まだまだ少ないため、ご不便をおかけしております。 デザイナーが新しいパターンを制作しており、随時アップデートしてまいりますので、お楽しみに!

Webreak

ホームページ作成の「Webreak(ウェブレイク)」は制作費が無料で初心者でも自分でホームページを作ることができるWebサービスです。htmlやcssなどの専門知識不要で、ソフトをダウンロードする必要もありません。広島を拠点に開発をしています。

results matching ""

    No results matching ""