画像や写真の追加・編集
ページに画像を追加する方法はいくつかありますので代表的な方法を紹介します。
目次
ドラッグ＆ドロップで直接画像を追加する
一番簡単な方法です。エクスプローラーなどに保存した画像を用意して、ブロック要素の下にドラッグ＆ドロップしてみましょう。
編集画面いっぱいに配置されました。
「更新」「ホーム」ボタンを押して、実際の表示を見てみましょう。
「あれ？画面いっぱいに配置されている！？」
「はい、これが正しい表示です。」
初期設定で設定した横幅を超えてインターネットブラウザいっぱいに表示されているかと思います。これは、画像によっては横幅いっぱいに表示させたい場合を考慮して、あえて画像は初期設定を無視して横幅いっぱいに配置されるように設定されています。サイズ変更をすれば簡単に拡大・縮小ができるので用途に合わせてサイズを変更してみてください。
では編集画面に戻ってサイズを変更してみましょう！
画像のサイズを変更する
編集画面では、下の画像のように4つの方法でサイズを変更する事ができます。
- ①マウスでつかんで左右に移動すると縦横比を維持したままサイズを変更できます。（推奨）
- ②マウスでつかんで縦に移動すると縦横比を維持したままサイズを変更できます。（推奨）
- ③数値を入力してサイズを変更できます。※縦横比は維持されないので注意が必要です。
- ④ ％（パーセント）サイズを指定できます。※ブラウザーの横幅に対しての％表示ではなく、アップロードした画像のサイズに対しての％表示になるので注意が必要です。
- ⑤サイズを元に戻したい場合に「リセット」を押します。
サイズを変更して「更新」すると下の画像のように表示されるはずです。
思い通りのサイズ感になるよう調整してみてください。
次に画像の位置を調整してみましょう。
画像の位置を変更する
画像の位置を変更する場合には、下の画像のように変更したい画像を選択してポップアップメニューから①「配置を変更」ボタンを押し、次のメニューから画像の②位置を選択してください。
「更新」ボタンを押して実際のページで位置が変わっていたら完了です。
ブロック要素で画像を追加
ブロック要素で画像を追加する際には、下の画像のように①ブロックを追加ボタンを押して②画像を選択します。
下の画像のように、画像を追加する方法を選択する画面が表示されます。
- アップロード：PCのエクスプローラーが開き、パソコンなどに保存されている画像ファイルを選択してアップロードできます。
- メディアライブラリ：既にアップロードされている画像を選択して追加できます。
- URLから挿入：外部サイトなどから画像を引用する際などに使用します。
上の画像の青枠の中にドラッグ＆ドロップしても画像を追加することが可能です。
この他にも画像に関する操作はいろいろありますので、実際に試してみてください。