本記事では、STUDIOを用いてWEBサイトを作成するにあたって欠かせない画像の組み込みとその配置を学びます。

画像を配置する際も、前回学習した「ボックスモデル」の考え方がとても重要になります。画像を思い通りに配置できるよう、**STUDIOのルール（操作方法）**をしっかり覚えて、使いこなせるようになりましょう！

トップ画像の配置

まずは、どのWEBサイトにも必須となるトップ画像を配置してみましょう。

準備：STUDIOにログインし、「新しいプロジェクト」から「空白」を選択し、白紙のページを用意してください（詳しくは、完全ノーコードでここまでできる！STUDIOで作るポートフォリオサイトをご参照ください）。

白紙のページが準備できたら、以下の手順で**画像ボックス（このボックス内に、あとで選択した画像が入ります）**を選択・配置し、サイズを調整してみましょう。

・STEP１ 左のメニューから画像のアイコンを選択
・STEP２ 画像ボックスをドラッグ＆ドロップ
※オレンジ色の四角は、「ここにボックスを置けますよ」というガイドです。
・STEP３ 画像ボックスの大きさを調整する

配置された画像ボックスをクリックすると、選択された状態になります。選択されているボックスの上下左右＆四隅には白丸が表示されますので、この白丸上にカーソルを合わせて青矢印が出たら、拡大したい方向にドラッグします。すると、ドラッグされた方向ボックスが拡大されます。

今回は、トップ画像を配置したいので、画像ボックスを横幅いっぱいに広げましょう。

画像ボックスのサイズ変更は、矢印をドラッグする方法の他に、**「スタイルバー」**からも行うことができます。

サイズ変更したい画像ボックスを選択し、画面上部の「ボックス」タブを開いてください。この「縦幅」「横幅」の数字を変更することで、ボックスのサイズを指定できます。

※単位の表記をクリックすると、他の単位の選択肢（px,、%、 vh…など）が現れます。

では、いよいよ画像の挿入です。

ページ内に配置した画像ボックスをクリックし選択された状態にすると、左上に画像アイコンが現れます。これをクリックすると、画像メニューが展開されます。

メニュー内の画像をクリックすると、その画像がボックス内に挿入されます。画像を変更したいときも、同様の操作（画像ボックスの選択➔画像アイコンをクリック➔メニューから新たな画像を選択）で行うことができます。

画像メニューに展開される画像郡は、STUDIOが提携している素材サイトのもので、無料で使うことができます（どの画像もクオリティが高いので重宝します）！

なお、これらの画像は商用利用も可能です。

画像の検索

ここでは、作成するサイトに合った画像を検索する方法をご紹介します。

画像ボックスを配置し、左上の画像アイコンを選択して、画像メニューを展開してください。画像メニューの上部に検索窓がありますね。ここにイメージに合うワードを入れて、Enterキーを押すと、画像の検索ができます。

STUDIOは海外発のサイトですが、画像検索は日本語にも対応しています。ただし、同じ意味でも（例えば「花」と「flower」）、日本語と英語では検索結果がやや異なります。イメージに合った画像が見つからないときは、英語でも検索してみることをおすすめします。

アップロードした画像を使用する方法

続いて、自分のPC内の画像をアップロードして掲載する方法をご紹介します。

まずは、これまでと同様に画像ボックスを配置し、左上の画像アイコンをクリックして画像メニューを展開します。この状態で、最も左寄りのバーをご覧ください。「画像」と「アップロード」、２つのタブがありますね。

「画像」タブが選択されているときは、先にご紹介したとおり、提携サイトから画像を選ぶモードになっています。ここで「アップロードタブ」を選択すると、自分のPCフォルダから画像をアップロードするモードに切り替わります。

「アップロード」タブを選択すると、隣にさらに「アップロード」と表示された窓が現れます。ここをクリックすると、自分のPCのフォルダ（例：「ダウンロード」フォルダなど）が開きます（必要に応じて、挿入したい画像が入っているフォルダに移動してください）。

画像を選択すると、その画像がSTUDIO内にアップロードされます。アップロードされた画像をクリックして選択することで、設置した画像ボックス内に、画像を挿入することができます。※今回は、別サイトからダウンロードした無料素材を使用しています。

複数の画像ボックスの配置

STUDIOの「画像ボックス」は、前記事で扱った「（通常）ボックス」と同じルールで配置することができます。

つまり、各要素は、親要素の「上・下・左・右・中央」計９箇所のポジションのうちいずれかに配置することになります。※親ボックスを設置しない場合は、白紙の背景全体が「親要素」となります。

※「親要素」・「子要素」とは、要素の包含関係を表します。ボックスAの中にボックスBが入っている場合、Aが親要素でBが子要素となります。

通常の「ボックス」を親要素として、その子要素として「画像ボックス」を入れると、親要素に対する子要素の配置（右寄せ、左寄せ、中央寄せ、均等割…など）を選択できます。もちろん、横並びのみならず縦並びにすることもできます。

これらの配置は「STUDIO基本操作① ボックスモデルを制するものはSTUDIOを制す!?」で詳しく解説しています。

「Box」モードと「Image」モードの違いについて

画像ボックスを配置すると、下図のように「Box」または「Image」という選択肢が表示されます。これらの違いは何でしょうか？

簡単に説明すると、「Box」・「Image」の設定は、画像の縦横比を任意とするか、元画像の比とするかを決定します。

「Box」に設定すると、画像ボックスは文字通り「ボックス」として扱われます。つまり、作成者が設定したサイズのボックス内に、画像が設置されます。縦長の画像を、横長に表示することもできるわけです。

画像のどの部分を表示させるかの設定は、次章でご説明します。デフォルトでは、元画像の中央部分を中心に表示されます。

一方、画像ボックスを「Image」に設定すると、元の画像の縦横比を保ったまま拡大・縮小されます。

「Image」モードでは、スタイルバー（画面上部）の「縦幅」は自動的にautoで固定され、数値を入力することができなくなります。横幅のサイズ変更に合わせて、自動的に元の比率に合った縦幅が適用されるのです。

また、「Box」モードでは、スタイルバーの画像タブから画像の明るさやコントラストなどを変更することができます。しかし、「Image」モードでは、このような画像の編集を行うことができません（画像タブ自体が表示されません）。

画像の編集

前章でも触れましたが、画像ボックスを「Box」モードにしておくと画像の編集をすることができます。

画像の編集（エフェクト）に関しては、「明るさ」「コントラスト」「鮮やかさ」「モノクロ」「セピア」「ぼかし」が設定できます。その他、画像の表示に関して「配置」「リピート」「cover/contain」が設定できます。

では、以下の画像に対して、よく使うエフェクトをいくつかピックアップしてご紹介したいと思います。

画像の明るさの編集

明るさは、「1〜0」の間で編集できます。「1」は元の明るさで、「0」は真っ暗です。画像上に白抜きの文字を入れたいときなどは、0.4〜0.5にするとよいでしょう。

画像のモノクロ度合いの編集

画像のモノクロの度合いも「0〜1」の間で編集できます。「1」は元の色彩で、「0」でモノクロとなります。

画像のぼかし度合いの編集

画像のぼかし度合いは「0〜20」の間で編集できます。数値を大きくするほど「ぼかし」の度合いが大きくなります。

画像の「リピート」と「cover/contain」

「リピート」と「cover/contain」は、セットで覚えましょう。

**「contain」**は、画像ボックスの中に画像をすっぽり収める（contain=含む）設定です。この状態で、画像を「リピート」させると画像が繰り返し表示されます。一方、画像を「リピートさせない」設定にすると、アイコンイメージの通り、1枚の画像のみがボックスに収まった状態で表示されます。

**「cover」**を選ぶと、画像ボックスが画像でカバー（画像でいっぱいに）されます。つまり、下図のような表示になります(デフォルトでは、「cover」になっています)。すでに、画像ボックスがいっぱいの状態なので、「リピート」に設定しても表示は変わりません。

画像の「配置」

任意の縦横幅に設定された「画像ボックス」に画像を挿入すると、通常、画像は元画像の中央から自動でトリミングされた状態で表示されます。

しかし、スタイルバーの「配置」から画像のどの部分を基準に表示させたいかを設定すると、画像の表示箇所を変更することができます。ただし、この設定は、画像表示の基準点を設定するのみで、細かい位置設定（あと5px上に移動など）はできません。

下記の例では、元画像の右端を中心に表示するよう設定しています。

その他の画像サイズ設定

実は、画像のサイズ設定には、「cover/contain」の他に「px」または「%」で設定することもできます。これは、画像ボックス内において、画像を何%または幅何pxで表示するかという設定形式です。

画像を100%以上にすると、画像が拡大された状態で表示されます。画像ボックスからはみ出た部分は非表示になり、画像ボックス内にある部分のみが表示されます。

いかがでしたか？細かい設定はできなくとも、かなり自由度の高い編集ができるかと思います。画像へのエフェクトも、是非いろいろ試してみてください！