画像を挿入

字幕

このレッスンでは、ページに画像の挿入を行います。それでは、このレッスンの素材の中の２つの JPG ファイル、この画像ともう１つこの画像、これをページの上に挿入していきましょう。ではまず CARNET の方のページを開きます。そうしたら、ここのフォームの下に画像を入れたいと思います。ではまずは、01 の方の画像をドラッグ＆ドロップで持ってきます。そうすると、とりあえずこの上に置かれましたね。ちょっと下の方に持ってきましょう。表示を丁度 75% ぐらいにして見やすくして行います。現在、大分ページからはみ出すようなサイズなので、このサイズをドラッグしていって丁度いいぐらいに調整します。ページの横幅ギリギリぐらいに持っていくとこんな感じですね。ちょっと１回プレビューして見てみましょう。そうすると、ロゴとフォームがあって画像があってフッターがあるんですけれど、この部分、少し横がいきなり空いちゃっているので見栄えがあまりよくないかと思います。なので、ここの横の部分に幅いっぱいまで黒い長方形を足して、それで横を埋めるようなデザインにしてみようと思います。では長方形ツールを選びます。そして、この写真の所をドラッグして同じ大きさにしてあげます。 そうしたら塗りを黒にします。そうすると、こんな感じになるので横幅をいっぱいまで持ってきましょう。そうしたら、これを写真の下に敷きたいので右クリックして「アレンジ」、これで「最背面へ」これを実行すると、こんな感じで画像の下に黒い部分が足されました。そうしたら、今フッターとぴったりくっついてしまってるので、この部分、ページの下部をドラッグしてちょっと隙間を空けましょう。これだとプレビューしてみると大分感じが変わりましたね。この様に画像だけ置くとちょっと余白が気になるかな、という時にはこのようなプラスアルファの素材を敷いてやると、特にこれは、かなりダークな画像なので横もダークにすると言った感じで締まることがあります。では次に、こちらのぺージですね、こちらにも画像を持ってきます。02 の方ですね、これをドラッグ＆ドロップで持ってきます。同じく、ちょっと表示を小さくして見やすくしてではこのテキストの下の所ここに配置する形でこんな風に持ってきます。そうすると、こんな感じですね。では、ちょっとスペースを開けておきつつまたここも横に黒い部分を付けたいので、長方形ツール、これを選んで塗りは黒にします。そうしたら横幅をいっぱいまで持っていって、そして「アレンジ」＞「最背面へ」こうしてやるとここも画像が追加されます。 そして、それぞれのページに画像が置かれた状態となりました。Muse はこの様に画像も簡単に置くことができるので、ビジュアル性を重視したサイトを簡単に作ることが可能です。