はじめようWeb制作(初級編)第7回

前回は「見出し」の部品を使って、各ページのタイトルを配置しました。

Jimdoではこのように、さまざまな部品を並べてページを作成していきます。

今回は画像の設置について解説します。

但し、単に設置するだけでなく少し深い話しになるので覚悟してください^^)

 

■メイン画像の設置

通常、トップページにはメイン画像が存在します。

メイン画像はそのホームページが何屋さんなのかひと目でわかるのが理想です。

看板商品の画像でもいいですし、サービスを象徴するイメージ画像でもOKです。

 

当サイトでも、複数の画像が入れ替わるメイン画像が存在していますが、実はこれは画像の部品ではなく背景画像という位置づけになります。

ちょっと話が複雑になってきましたね。多くの方が混乱を招く部分です。

背景画像は選択したレイアウトデザインにより、見え方はさまざまで全体の背景になっている場合もあれば、背景にしては小さい表示で見えるものもあります。

 

ホームページ作成のデザインのコツは大きく2つ。

ひとつは「文字と画像のバランス」。もうひとつは「画像のクオリティ」。この2点を気を付ければ、素人でもそこそこの見栄えになります。

そして、いずれも訓練することで上達するので安心してください。

 

当サイトではメイン画像が特等席で威張っています。なので、メインエリア上段には「お知らせ」を配置してバランスをとっています。ここに別のメイン画像を設置すると、画像だらけで落ち着かない状態になります。イメージわくでしょうか?

 

全面背景の場合には「画像」部品を使ってメイン画像を配置したほうがいいでしょう。

前回と同様に「+コンテンをの追加」ボタンを表示し、上段右から2番目の「画像」を選択してください。

 

以下の画面になるので、ここに設置したい画像をドラッグ&ドロップしてもよいですし、クリックしてファイルを選択してもかまいません。

とりあえず、画像は入ります。また、下にある部品のメニューで画像の拡大縮小、右寄せ、左寄せやセンタリングもできます。最後に保存を忘れないようにしてください。

ここで重要なコツをもうひとつ。先ほど、バランスが重要と書きました。上図では文章と画像がきっちり詰まっていて圧迫感があります。そこで、少し余白を入れたいところですが、Jimdoでは余白を入れるための部品があります。

クリックすると以下の画面になります。高さを自由に調整できます。

余白を入れて、調整した結果、以下のようになります。

Jimdoでページを作成するには「余白」部品を活用しまくりましょう。

「余白」を上手に使いこなすことがポイントです。

 

次回は文章の設定に進みます。

メモ: * は入力必須項目です