Advertisement
ページ背景の画像をメインイメージにする裏ワザ
2016年5月27日 オドロキの活用術
Wepage Siteでは背景の色や模様、画像など様々な設定を行うことができますが、本日は背景に画像を指定して、その背景画像をメインイメージにする裏ワザをご紹介します!
背景画像をうまく使用することで、スマートフォンに自動最適化されてもメインイメージが小さくなってしまうことなく、メインイメージのビジュアル要素が強調され、オシャレできれいなページが出来上がります。
1.背景に画像を指定しましょう
背景に画像を設定する際は、編集画面左端の「>>」ボタンから、背景設定→画像を選択します。
画像はライブラリから選択するか、またはPCから直接ドラッグ&ドロップでアップロードができます。
背景画像作成のコツは余白部分を活用するために、モニターの実際の表示サイズで作成することです。
今回は現在モニターサイズで主流となっている横幅1920ピクセルでデザインした横幅1920ピクセル×764ピクセルの画像を作成してアップロードしました。
2.背景の表示設定をします
3.メインビジュアル部分を「改行」
さて、次が「裏ワザ」部分です。
ロゴやメインテキストなどを追加したら、背景の画像部分に「文章」のコンテンツを挿入します。
そして文章に何も入れず画像の高さ分「改行」してしまいます。
今回の画像は19行改行しました。
すると、画像の大きさを「等倍」としていますので、PC・タブレット・スマートフォンでも画像の大きさと文字の改行が同じとなり、背景画像をメインイメージとして利用することができるのです。
PC
タブレット
スマートフォン
今回作成した画像は、ビジュアル要素が大きいため、スマートフォンでは全体が切れてしまいましたが、伝えたい部分をスマートフォンサイズを基準にして作成したり、伝えたい部分だけ背景画像ではなく「コンテンツ」としてページに追加するとどのデバイスで見ても迫力のあるメインイメージのページが作れます。
今回作成したページはこちら
いかがでしたか?今後もWepage Siteの裏ワザでより自由なホームページの作り方をご紹介していきます!
Advertisement