【STUDIO】画像にテキストを回り込ませる方法

2023年6月23日

こんばんは、仙台でWeb制作フリーランスをしているキクチウェブのキクチです。
最近は夜更かしばかりでダメダメ人間ぶりを存分に発揮しております。

本日も大好きなSTUDIOについての解説です。お付き合いくださいませ。

本日ご紹介するのは「画像にテキストを回り込ませる方法」です。
言葉よりも見てよもらった方が早いと思うのでこういったやつです。
GIF画像を軽量化したので画面が粗いですがご了承ください。

画面が縮小するのにあわせて、テキストが画像にまわり込んでいるのが分かると思います。
これをやって行きます。

はじめに注意点なのですが、今回紹介するテキストが画像に回り込む方法は現状ではノーコードでの対応ができません。よって、HTMLとCSSを書くことになります。
とはいっても、難しくないのでコードをコピペして使っていただけたらと思います。

それとSTUDIOの操作や理解はある程度持ち合わせている前提で解説しています。
ご了承ください。

では、やって行きましょう！

ボックスを用意して、<iframe>タグを配置する

まずはお好きなサイズのボックスを用意します。

サイズ調整は最後の方で行うので、まずはお好きなサイズでご用意ください。
私の場合は、上記のようなボックスを用意しました。

続いて、この中に<iframe>タグを配置して行きます。

画面中央の左側のこちらから

これで<iframe>タグを画面に配置することができました。

では、先ほど用意しておいたボックスの中に<iframe>タグを入れちゃいましょう。

これで準備はOKです。
次はコードを書いて行きます。

コードを書く

念の為コードを書く場所を示しておきます。

赤枠の部分にコードを記述して行きます。
コードはこちらになります。

<div class="container">
  <div class="img-box">
    <img src="ここに画像のURLが入ります" alt="">    
  </div>
  <div class="text-box">
    <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが</p>
  </div>
</div>

<style>
  .img-box {
  float: left; /* 画像を左にする場合 */
  margin-right: 20px; /* テキストとの余白 */
}
  .img-box img {
    width: 200px; /* 画像の横サイズ */
    height: 300px; /* 画像の縦サイズ */
    object-fit: cover; /* 画像の調整 */
    border-radius: 12px;　/* 画像の角の丸み */
  }
.text-box p {
  /* テキストの各種調整*/
  font-size: 20px;
  line-height: 2;
  margin: 0;
  text-align: justify;
  font-weight: normal;
}
  
</style>

コードはこの通りです。

軽めに説明すると
HTMLは「container(div)」で全体を囲んでおり、左側には画像を配置する「img-box(div)」、右側にはテキストを配置する「text-box(div)」が用意されています。
それぞれの要素の下には画像やテキストがあるといった感じです。

画像を指定する

<img src=”ここに画像のURLが入ります” alt=””>の部分でお好きな画像を指定することができます。
その場合、STUDIOに画像をアップしてそのURLをコピーして貼り付ける作業が必要になります。
その手順はこちらです。

アップロードが済んだら、アップした画像をクリックします。
すると画面上に画像が配置されてしまいますが、それは一旦無視します。

画面上に配置された画像をクリックした状態で
画面中央の右側の三本線をクリック

赤枠で囲んだ部分が、画像のURLになります。
コピーしておきましょう。

画面上に配置された画像については消してもらって結構です。

そして先どのコードに戻っていただいて
<img src=”ここに画像のURLが入ります” alt=””>
この部分にコピーした画像URLを貼り付けることで画像の指定は完了です

画像のサイズを調整する

  .img-box img {
    width: 200px; /* 画像の横サイズ */
    height: 300px; /* 画像の縦サイズ */
    object-fit: cover; /* 画像の調整 */
    border-radius: 12px;　/* 画像の角の丸み */
  }

先ほど紹介したコードの抜粋なのですが、
「width」で画像の横サイズを調整。
「height」で画像の縦サイズを調整。
この2つを調整することで、お好きなサイズにカスタマイズしてお使いください。