商品ページに画像やリンクを挿入する手順を詳しく解説

どーも、Koichiです!

 

この記事では、商品ページに商品画像を張り付けたり、
他の関連商品のページへのリンクを貼る方法
について詳しく解説したします。

 

 

この記事では

 

HTMLファイルのつくり方
HTMLタグの使い方

 

を理解している前提でご説明いたします。

 

 

これらのやり方がわからない方は、
まずはじめに下記の記事を
上から順番にお読みいただければと思います。

 

HTMLファイルを簡単に方る方法をはじめから解説
商品説明文の体裁をHTMLで整える手順を詳しく解説

 

 

それではまずはじめに
商品画像の追加手順についてご説明いたします。

 

スポンサードリンク



商品説明に商品画像を張り付ける

 

まずはじめにメモ帳またはテキストエディタを開きます。

 

この記事では無料のサクラエディタを使います。
(サクラエディタのインストール手順はこちら

 

 

エディタを開いたら、
商品説明を入力していきます。

 

 

この商品ページを
実際のウェブ上で見ると
このような感じになります。

 

 

この赤文字の下に商品画像を貼りたい場合は、
次のような文言を使います。

 

 

<img src=””>

 

 

この文言を覚える必要はありません。
この記事からコピーして
どこかメモ帳などに保存しておいてください。

 

 

そうすれば、使いたいときにいつでもコピペして使えます。

 

 

まず、src=””の

 

 

「” “」

 

 

このカギカッコの間に
商品画像が保存されているウェブ上の
URLを張り付けます。

 

*画像の保存先は無料ブログでもSNSでもOK!

 

 

例えば、

 

http://arknoah.net/wp-content/uploads/2017/03/fruitpostit20161.jpg

上記のような画像のURLを
「src=””」のカギカッコの間にいれて

 

 

src=”http://arknoah.net/wp-content/uploads/2017/03/fruitpostit20161.jpg”

 

 

のように表記します。

 

 

すると実際の商品ページで
このように表示されます。

 

 

もし画像の高さを変更したい場合は、
「height=””」

 

画像の幅を変更したい場合は、
「width=””」

 

を<img scr=””>タグの内部に追加します。

 

 

追加したら、それぞれの長さを数字で設定します。

 

例:height=”200″ width=”200″ (縦横同じ長さだと正方形)

 

 

リンクを貼る

 

次にリンクを貼る手順です。

 

まずは下記のように、説明文を追加します。

 

 

すると、実際のウェブページ上では
このように商品ページが表示されます。

 

 

次にリンクを付けたい文字列を
<a href=””></a>
で挟みます。

 

 

挟んだら「href=””」のカギカッコ内に
リンクさせたいページのURLを
貼り付けます。

 

 

すると実際の商品ページで
リンクの部分の文字色が紫色になります。

 

 

リンクをクリックすると、
その他の商品一覧のページへ移動します。

 

 

以上、画像とリンクの挿入方法でした。

 

 

ここまでくると、
もう商品ページとしては
ほとんど完成です。

 

 

最後の記事では商品ページに
テーブル(表)追加する方法
についてご説明いたします。

 

 

商品ページは、
たった一度だけHTMLタグの枠だけを
作成してしまえば、
あとはそれをずっと使いまわして
商品を売り続けることができますので、
大変なのは最初だけです。

 

 

と言っても、
実際にやってみると
非常に簡単に作れてしまいますので
是非楽しみながら作成して頂けましたら
幸いです。

 

 

それでは最後までお読みいただきありがとうございました!

 

 

HTMLファイルを簡単に方る方法をはじめから解説
商品説明文の体裁をHTMLで整える手順を詳しく解説
テーブルのつくり方を詳しく解説
サクラエディタのインストール手順

3 件のコメント

  1. ピンバック: テーブルのつくり方を詳しく解説 | 輸入ビジネスを資金ゼロから始めて独立したKoichiのブログ

  2. ピンバック: 商品説明文の体裁をHTMLで整える手順を詳しく解説 | 輸入ビジネスを資金ゼロから始めて独立したKoichiのブログ

  3. ピンバック: HTMLファイルを簡単に方る方法をはじめから解説 | 輸入ビジネスを資金ゼロから始めて独立したKoichiのブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です