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

どーも、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で整える手順を詳しく解説
テーブルのつくり方を詳しく解説
サクラエディタのインストール手順

コメントを残す

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