ウェブデザインやホームページ作成、アッと驚くホームページの使い方などのノウハウをお届けします。

最新の投稿


2016年9月29日  Wepage Site最新情報 

新サービス「Wepage」リリースのお知らせ


2016年7月11日  Wepage Site最新情報 

Wepage Siteへサービス名称変更のお知らせ


2016年5月27日  オドロキの活用術 

ページ背景の画像をメインイメージにする裏ワザ


2015年6月26日  オドロキの活用術 

ココがスゴイ!同時編集でみんなで作るウェブサイト


スポンサーリンク

ページ背景の画像をメインイメージにする裏ワザ

2016年5月27日  オドロキの活用術 

Wepage Siteでは背景の色や模様、画像など様々な設定を行うことができますが、本日は背景に画像を指定して、その背景画像をメインイメージにする裏ワザをご紹介します!

背景画像をうまく使用することで、スマートフォンに自動最適化されてもメインイメージが小さくなってしまうことなく、メインイメージのビジュアル要素が強調され、オシャレできれいなページが出来上がります。

1.背景に画像を指定しましょう

背景に画像を設定する際は、編集画面左端の「>>」ボタンから、背景設定→画像を選択します。

画像はライブラリから選択するか、またはPCから直接ドラッグ&ドロップでアップロードができます。

背景画像作成のコツは余白部分を活用するために、モニターの実際の表示サイズで作成することです。

今回は現在モニターサイズで主流となっている横幅1920ピクセルでデザインした横幅1920ピクセル×764ピクセルの画像を作成してアップロードしました。

2.背景の表示設定をします

3.メインビジュアル部分を「改行」

さて、次が「裏ワザ」部分です。

ロゴやメインテキストなどを追加したら、背景の画像部分に「文章」のコンテンツを挿入します。

そして文章に何も入れず画像の高さ分「改行」してしまいます。

今回の画像は19行改行しました。


すると、画像の大きさを「等倍」としていますので、PC・タブレット・スマートフォンでも画像の大きさと文字の改行が同じとなり、背景画像をメインイメージとして利用することができるのです。

PC

タブレット

スマートフォン

今回作成した画像は、ビジュアル要素が大きいため、スマートフォンでは全体が切れてしまいましたが、伝えたい部分をスマートフォンサイズを基準にして作成したり、伝えたい部分だけ背景画像ではなく「コンテンツ」としてページに追加するとどのデバイスで見ても迫力のあるメインイメージのページが作れます。

今回作成したページはこちら

いかがでしたか?今後もWepage Siteの裏ワザでより自由なホームページの作り方をご紹介していきます!

スポンサーリンク

Powered by Wepage Site