こんにちは、makeshopサポート担当です。
いつもmakeshopをご利用いただきありがとうございます。

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

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

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

そもそも、HTMLエディタ機能って？！

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

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

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

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

設定方法

（1）画像をアップロード＆URLをコピーする！

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

【ショップデザイン（PC）】>【ファイル管理】>【ギガプラス10（100MBサーバー）】

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

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

（2）「HTMLエディタ編集モード」に切り替える！

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

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

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

（3）画像を登録する！

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

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

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

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

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

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

完了！

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

【参考】素材を活用！

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

参考外部サイト：「EC design（デザイン）」

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

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

それではまた！