HTMLの編集でアップロードした画像を使う方法

2021年6月24日

クローバ PAGEを使いこなしているみなさまの中には、HTMLやスタイルシートをカスタマイズしてオリジナリティのあるサイトを作成している方も多いと思います。今回はクローバ PAGEのカスタマイズに使えるちょっとしたテクニックをご紹介します。

基本的なレイアウトはクローバ PAGEのエディタで楽々作れるのですが、例えば段組みを入れ子にしたい場合など、どうしても標準機能では表現できないこともあります。そんなときにHTMLの編集とスタイルシートの出番なわけですが、以前、カスタマイズしたHTMLに画像を埋め込むにはどうしたらいいのかというお問い合わせを受けたことがありました。

実はある方法を使えば、アップロードした画像をHTMLの編集から使用することができちゃいます。

HTMLの編集について

とのその前に、HTMLの編集ってなにっていう方はこちらをご覧ください。

HTMLエディタとスタイルシートでページをカスタマイズ

空のセクションを作って画像パーツを配置する

まず、空のセクションを追加します。

それからセクションの設定で、表示項目を「表示しない」に設定します。ここがポイントです。

セクションに画像パーツを追加していきます。このセクションは表示されないので実際の見た目に影響はありませんが、画像が縦に並んで編集しにくいという方は適当に段組みパーツを入れてレイアウトを整理してください。

画像のURLを取得する

さて、これで使用する画像がアップロードできました。画像の設定画面を開くと、「画像のURLをコピー」というリンクがあります。これがアップロードした画像のURLになります。

あとは別のセクションから、HTMLの編集でこのURLを呼び出せばいいわけです。やってみましょう。

テキストパーツを追加して、HTMLの編集ダイアログを開きます。今回はこんなふうに、テーブルの中に画像を入れてみました。

<table class="people">
<tr>
 <td>
  <div class="person">
   <img src="<画像1のURL>">
   <div>山田 ケンジ/div>
  </div>
 </td>
　<td>
  <div class="person">
   <img src="<画像2のURL>">
   <div>佐藤 タケル/div>
  </div>
 </td>
　<td>
 　<div class="person">
   <img src="<画像3のURL>">
   <div>歌川 ヒロシ/div>
  </div>
 </td>
</tr>
</table>

そのままだと<IMG>がブロック要素になってしまうので、PCでは文字が横に並ぶようにスタイルシートで調整します。

table.people {
  background-color: rgb(255,255,255,0.8);
}
table.people td {
  border: 1px solid #666;
  padding: 16px;
}
.person {
  font-weight: bold;
}
.person img {
  margin-bottom: 8px;
}
@media (min-width: 560px) {
  .person {
    display: flex;
    align-items: center;
  }
  .person img {
   height: 100px;
    margin-right: 8px;
    margin-bottom: 0;
  }
}