取説 一覧 / トップページのファーストビュー

トップページのファーストビュー

トップページのファーストビューはホームページにとって一番大事な部分といえます。

このファーストビューで訪問者が興味をもつか、すぐに閉じてしまうかが決まります。
※ファーストビューとはホームページを開いて一番最初に画面に映る範囲の事を示します。

大体のホームページがファーストビューに伝えたいことやキャッチフレーズを大きく綺麗な写真や画像と一緒に見せています。
画面横幅いっぱいに表示させる方がインパクトがあるのでオススメです。

では、画面いっぱいに表示させる方法をお教えします。

まず、用意する写真や画像は横幅1500〜2000pxくらい縦幅は1000pxくらいにしましょう。
ここで気をつけるのはPC用に作成した文字入りの画像では、スマホサイズにした時に文字が潰れてしまう場合がございます。
そこで3つの解決方法があります。
1,スマホの横幅は小さくて320pxなのでそちらに気をつけて画像を作成する
2,文字はテキストで入れる
3,文字だけの画像(透過)を作成し用意した写真の上に配置する

という方法があります。

画像の導入方法
左のサイドメニューに「ギャラリー」があり
そちらで写真を追加したり、文字を入れたりします。ギャラリーの使い方はコチラ

まず、1の場合は画像を入れてページエディタにて配置をするだけです。
2の場合。
ギャラリーにて、いれた画像の左上にあるオプションボタンをクリックし、タイトルと概要に文字を入れることが出来ます。
そこに入れたい文字を入れる。
3の場合。
2と同じくタイトルと概要のところに、を入れる。
ページエディタでギャラリーパーツを配置し、ギャラリーパーツが入ったブロックにclassを付ける。
css編集にて先程つけたclassに対し
.garally-fadein>div>p{
position: absolute;
bottom: 50%;
left: 50%;
padding: 0 20px;
width: 300px;
margin-left: -150px;
margin-bottom: -70px;
}※文字は全て配置したい場所や画像の大きさによって異なります。例)横幅300px縦幅150pxで真ん中に寄せた場合。

 

PIPPAsac Tips