どうも、真です！
前回の記事では、ECサイトの初心者でも知っておいて損はないHTML基礎をお伝えしました。
まだご覧になっていない方は、是非とも読んでみてください！
【これさえ知っておけばなんとかなる！】ECサイト初心者のためのHTML基礎①（文字の改行、太字にする、文字の色を変える、文字のサイズを変える）
「HTMLってなんだか難しそう…」
そう思っていたあなたも前回の記事を読んだら、
「自分にもできそう！」
「もっと色々できるようになりたい」
と前向きになってもらえたのではないかと思います。
そこで今回は、ECサイトを運営していく上でより実用的で、自分のショップの見映えを良い感じにできるHTMLの基礎をお伝えします。
今回の記事を読んでもらえれば、「画像を挿入」したり、「画像の大きさを自由に調整」したり、「バナー画像にリンクを貼っておススメページに移動」したりできるようになります！
さらに、
「このショップを参考に、自分のショップサイトも良い感じにしたい！」
と思った時に使える、参考サイトを真似する裏技も教えちゃいます。
ぜひ、最後まで読んであなた自身であなたのショップを良い感じに作れるようになっていきましょう！
実用的なHTML基礎
①画像を挿入し、表示する
画像を挿入し、表示するときに使うのが、
『 img タグ 』
です。
使い方は、
<img src=”〇〇〇（画像保存先のURL）”>
と表記します。
<img>タグは開始タグのみです。
中身をみますと、
<img の後に半角スペースを空けて、src=” “（ダブルクォーテーション）と書き、ダブルクォーテーションの中には画像保存先のURLを記載し、> で閉じる、という構造です。
「画像保存先のURL」というのを少し説明します。
ヤフショやauPAYマーケットや楽天市場に出店すると、各販路のあなたのショップで使うバナー画像や商品画像を各販路のシステム上に登録・保管する必要が出てきます。
そのときに、画像１枚１枚に識別用のURLが付与されます。
例えば、私のヤフショの画像保管庫をみますと、このようになっています。
赤枠で囲った部分が「画像保存先のURL」となります。
このURLをダブルクォーテーションの間に挟みこむと、その画像がサイト上に表示される、ということになります。
例えば、このようなバナー画像を作ったとします↓
このバナー画像を商品ページに挿入し、表示させたいときに以下のサンプルのように表記します↓
画像の挿入と表示は、バナー画像だけではなく、商品画像やロゴ画像などでも使えます。
画像が入ると一気にできるようになった気がしませんか？
②画像の大きさを変える
先ほどの画像挿入と表示では、元からの画像サイズがそのまま反映されています。
ただ、画像を表示させる場所や、ECサイトをみる媒体（パソコンやタブレット、スマホなど）によって画像の大きさは違います。
そんな画像の大きさを変える時に使うのが、
『 imgタグとwidth（幅）・height（高さ）』
です。
使い方は、
<img src=” 〇〇〇（画像保存先のURL)” width=”△△(表示させたい横のピクセル数)” height=”□□(表示させたい縦のピクセル数)”>
と表記します。
ただ、縦と横のピクセル数を毎回調整するのはとても大変ですので、私のおススメは
width=”100%” とだけ表記する方法です。（縦の表記は書きません）
こうすることで、画像を表示させる場所によって自動で横幅目一杯に画像を拡大・縮小してくれます。高さも併せて変化します。
先ほどのサンプルは右側に余白がありましたが、サンプルの表記を以下のように書き直すと↓
サイトの幅に合わせて、画像のサイズを調整してくれます。
これで、サイトの見映えが揃い、みやすいページを作ることができます！
③バナー画像にリンクを貼る
これまでは単なる画像をサイトに表示させてきました。
最後は、画像をクリックすると別のページ（特集ページやおススメ商品ページなど）に移動するようにしたいときに使う、
『 imgタグ と aタグ 』
です。
使い方は、
<a href=”〇〇〇(移動したいサイトページURL)” target=”_blank”><img src=”△△△(画像保存先のURL)” width=”100%”></a>
と表記します。
かなり長く、複雑な感じがしますね…
１つずつみていきましょう。
まず、<a href=”〇〇〇(移動したいサイトページURL)”></a>のタグは、リンクを設定するタグになります。開始タグと終了タグがあることに注意してください。aとhrefの間は半角スペースを空けましょう。
移動したいサイトページURLは各販路で調べることができます。
URLを書いた後に、半角スペースを空けて、target=”_blank”と書いてください。
これを書いておくことで、リンクをクリックしたときに別のタブで移動先のページを開いてくれます。
元のページに戻りやすいので、この記述をおススメします。
そして、<a href>タグと</a>タグの間に、先ほど紹介した<img>タグを書き込めばOKです！
画像をクリックすると、指定したページへ移動してくれるようになります。
サンプルをみてみましょう↓
これができると、かなりそれっぽいサイトになってきます笑
「おススメ商品ページ」や「セール商品ページ」など特集ページを作り、画像バナーにそのページに飛ぶリンクを貼ることで、あなたのショップでのお客様の回遊率や滞在時間が増えて、購買につながるはずです！！
ぜひ、いろいろとやってみてくださいね。
お手本サイトを真似る『検証』機能！
あなたがECサイトでショップ運営をしていく上で、
「こんなショップページにしたい！」
というイメージがあると思います。
あなたのイメージに近いサイトを探してみてください。
そのWebサイトがどんなHTMLの作りになっているのかを調べる方法があるんです。
真似したいページの構成を丸裸にしてしまう裏技です。（ちゃんとした機能ですが…）
Google Chromeに標準的に搭載されている機能ですので、Google Chromeをまだ使っていないあなたは是非この機会にダウンロードしてください。
こちらの記事にまとめてありますので、参考にしてくださいね。
中国輸入で必須のブラウザ【Google Chrome】をダウンロードしよう！
参考サイトの構造を調べるために使うのが、Google Chromeの「検証」機能です。
まずは、参考にしたいサイトを開きます。（今回は私のショップのお知らせページです）
そのページで右クリックをして、項目の中から「検証」をクリックします。
すると、画面の下部（または右側）に画像のようなパネルが表示されます。
難しそうな英語表記が色々と出てきますが、見る必要があるのは青枠の部分のみです。
参考にしたい部分の対象箇所を青枠の中から探し出し、どのようなHTML構成になっているかを調べることができます。
こうして、真似したいWebページがどんなHTML記述で、どのように構成されているか全部わかってしまうのです！！
これが標準機能ですから、すごいですよね。
慣れるまでの最初は難しく感じられるかもしれませんが、何度も見ているうちにやり方が掴めると思いますので、チャレンジしてみてください。
最後に
今回はより実用的なHTMLの基礎をご紹介しました。
かなり色々できるようになったのではないでしょうか？
ここまでHTMLの基礎をみてきたあなたならば、
「このサイトはこんな感じでHTMLを駆使して作っているのね」
となんとなくイメージできるようになってきたのではないでしょうか？
なんとなくでもイメージが沸いて、HTMLに対して苦手意識が無くなったことがとても重要です！
また、「検証」機能を使うことで色んなサイトがどのように作られているのかもわかってしまうのもすごいですよね。
HTMLは専門的に学ぼうとすると大変です。
でも、ECサイトでビジネスをやろうとする場合は、前回と今回の知識があればかなり色々と出来るはずです。
専門的な知識が無くても、ご紹介した知識を知っていいれば損はないですし、慣れてくれば自分のショップを自由にあなた自身でカスタマイズできます。
使えば使うほど慣れてきますし、わからないことはその都度調べるのでOKです！
今回の記事をきっかけに、HTMLへの苦手意識を払しょくし、楽しくビジネスを進めていきましょう。
今回もご覧いただき、ありがとうございました！