こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回は、HTML超初心者の方向けに、HTMLエディタ機能を使って画像を表示させる方法をご紹介します!

こんなお悩みありませんか?

・HTMLタグで画像を表示させる方法がむずかしい…
・かんたんに機能のボタンを使って画像を表示させたい!

そもそも、HTMLエディタ機能って?!

自由にデザインを設定したい、でも知識がないからできない…。
そんなHTMLが分からない方でも、ボタンを使って画像を表示させたり、文字の大きさや色、テキストリンクをかんたんに付けたりすることができる機能です。

参考:オンラインマニュアル「HTMLエディタ ボタン機能一覧」

【超初心者向け】
HTMLエディタ機能を使って画像を表示させる方法!

商品詳細ページ内の『商品説明文』内に画像を表示させる方法をみていきましょう。
ここでは、例として下図のように「半額セール」のバナーを表示してみます。

商品詳細ページ

設定方法

(1)画像をアップロード&URLをコピーする!

まずはじめに、表示させたい画像を以下の手順でファイルサーバーにアップロードしましょう。

【独自デザイン(PC)】>【ファイル管理】>【ギガプラス10(100MBサーバー)】

オンラインマニュアル「【100MBサーバー/ギガプラス10】アップロード手順
参考記事「画像やCSSファイルをアップロードしたい

画像をアップロード後に、URL(画像のURLパス)が表示されますのでコピーしておきます。

ファイルアップロード

・アップロードする画像のファイル名は、半角英数字で名前を付けるようにします。
 (例:banner.jpg / icon_01.png)

(2)「HTMLエディタ編集モード」に切り替える!

【商品管理】>【商品の設定】>【商品の登録/修正】

を開き「PC用メイン商品説明文」左上の[ソース]ボタンをクリックすると
「HTMLエディタ編集モード」に切り替えることができます。

HTMLエディタ
→ボタンがはっきりした状態になっている場合は「HTMLエディタ編集モード」です。
 もう一度[ソース]をクリックすると「HTMLソース編集モード」に切り替わります。

(3)画像を登録する!

HTMLエディタ機能を使って画像を登録します。

HTMLエディタ補助

【1】画像を表示したい位置にカーソルを置き、イメージアイコン(山の絵)をクリックします。

【2】コピーしておいたURL(アップロードした画像のURLパス)を「URL」に入力します。

【3】「代替テキスト」に画像名を入力します。

【4】「OK」ボタンをクリックします。

HTMLエディタ補助

【5】登録した画像が表示されます。
※表示位置などを調整したい場合は、エディタのボタンを使って設定してください。

完了!

→最後に、修正内容を保存して、表示を確認してみましょう!

バナー表示例

【参考】素材を活用!

ネットショップ素材を無料でダウンロードして利用できるサイトもあります。
バナー画像を作るのがむずかしい方は、このような素材を活用するのもおすすめです。

参考外部サイト:「EC design(デザイン)

いかがでしたでしょうか。

エディタ機能を使って画像を表示することもできますが、HTML編集になれてきたら
【初めてのHTML/CSS】まずは基本のタグを使ってマークアップしよう!を参考に、
imgタグを使って画像を表示する方法にチャレンジしてみましょう。

それではまた!