WIX

5. ボックスを使ったレイアウト設計

1. 「Services」メニューの下にあるパーツを消していきます。各パーツを一つ一つ消していくという方法もありますが、ここでは全てのパーツをまとめて削除してみましょう。
 まず、下の画像のように、オレンジ枠を左上(または右上)から対角線に向けてドラッグします。すると、ドラッグの中で囲われた部品が全選択された状態になります。キーボードにある「delete」ボタン、または右クリックで選択画面を開いて削除ボタンを押すと、全選択されたパーツ全てが削除されます。

2. 次に、ツールバーからボックスを選択します。

3. ボックスは同じコンテンツを複製する際に非常に便利なパーツです。今回、3つのボックスを作りその大きさを均一に揃えたいと思います。ボックスの大きさを測る為、トップにある「ツール」ボタンを選択し「ツールバー」にチェックを入れます。すると、右側に選択されたコンテンツの情報を詳細にピックアップした別のツールバーが表示されます。

4. 3つのボックスが横幅に収まるようにする為、幅を275、高さを450に調整します。サイズは先ほど表示した右側のツールバーで確認しながら調整しましょう。

5. 次に、各パーツをボックスの中へ挿入していきます。左側にあるツールバーの「追加」ボタンから、画像・テキストを下のように入れてみましょう。この時、画像・テキストの枠がボックスの外にはみ出ないように注意して下さい。

6. 5の作業が終了したら、ボックスをコピーします。今回は3つのボックスを作りたいので、2回コピーして下さい。この時、ボックスが青い枠でしっかり選択されているのを確認してください。

7. 複製したボックスをドラッグして並び替えましょう。以上で完成となります。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です