商品説明文の体裁をHTMLで整える手順を詳しく解説

どーも、Koichiです!

 

この記事では商品ページの体裁をHTMLで整える手順について解説いたします。

 

前回の記事では、
商品ページをHTMLファイルで
作成してみました。

 

今回は作成した商品ページに、
商品説明を入れ、説明文の体裁を綺麗にして
見栄え良い商品ページにしてみたいと思います。

 

この記事では下記のことを
HTMLを使って行います。

 

改行する
見出しを付ける
文字の色を変える
文字の大きさを変える

 

改行する

 

まず前回作成した商品ページ(HTMLファイル)を開きます。
開く際は、作成したhtmlファイルを右クリックし、
「プログラムから開く」をクリックし
「サクラエディタ」をクリックします。

 

*なお、サクラエディタが無い方は、
「メモ帳」または「テキストエディタ」でファイルを開きます。

 

*ちなみにサクラエディタのインストールはこちらの記事をご参照ください。

 

 

次に商品説明などを入力します。
なお、文章を改行するときは、

 

「<br>」

 

という文字を改行したい場所に入力します。

 

 

するとこんな感じで文章が改行されて表示されます。

 

 

ちなみに<br>を入れないままファイルを保存してみます。

 

 

すると商品ページを実際に見た時に、
文章は改行されず、
すべての文が横一列に繋がって表示されてしまいます。

 

 

見出しを付ける

 

次に商品説明に見出しを付けてみます。

見出しをつけたい文字列のはじめと終わりを
<h1></h1>というタグで挟みます。

 

 

すると実際の商品ページでは、
こんな感じでタグで挟まれた文字列だけが
太いタイトルのようになります。

 

 

見出しの文字をもう少し小さくしたい場合は、
<h2></h2>というタグで見出しをつけたい文字列を挟みます。

 

 

すると、さっきより少しだけ見出しが小さく表示されます。

 

 

<h3></h3>
<h4></h4>
<h5></h5>

 

とどんどん数字を大きくしていけば、
見出しの大きさがどんどん小さくなっていきます。

 

 

文字の色を変える

 

文字の色を変える場合は、
<font color=””></font>タグで色を変えたい文字列の範囲を挟みます。

 

 

挟んだら、color=””の部分に替えたい色を指定します。
例えば、赤文字にしたい場合は

 

「Color=”red”」

 

というように「red」(赤)と入力します。

 

 

すると、タグで挟んだ範囲の文字が赤になります。

 

 

ちなみに、

 

青にした場合は blue
緑にしたい場合は green
黄色にしたい場合は yellow

 

を「Color=””」に指定します。

 

 

ちなみに、もっと細かい色を指定したい場合は、
このリンクより色別のコードを選んで
同様に「Color=””」に色コードを指定します。

 

例:赤の場合は「Color=”#ff0000“」

 

文字の大きさを変える

 

文字の大きさを変える場合は、
<font size=””></font>タグで大きさを変えたい文字列の範囲を挟みます。

 

 

挟んだら、size=””の部分に数字を指定します。
例えば、大きな文字にしたい場合は

 

「size=”7”」

 

というように「7」を入力します。

 

 

するとタグで挟んだ文字列が大きく表示されます。

 

 

ちなみに、大きさを小さくしたい場合は、

 

「size=”6″」
「size=”5″」
「size=”4″」
.
.
.
「size=”1″」

 

のようにどんどん数字を小さくしていきます。

 

 

組み合わせ

 

ここまでできたら、
あとはいろいろ組み合わせて
商品ページを作ってみます。

 

 

例えばこんな感じになります。

 

 

以上、商品ページの体裁を整える方法でした。

 

他にもいろいろと体裁を整える方法がありますが、
輸入ビジネスにおいては、これだけあれば十分です。

 

 

プログラマーやデザイナーになるわけではありませから、
必要最低限だけ覚えたら、
さっそく商品テンプレートを作って、
これを永遠にずっと使いまわして、
商品を何百、何千と販売して利益を生み出していきます。

 

 

HTMLに興味がある方は、
他のサイトでもたくさん情報があるので
是非検索して頂ければと思います。

 

 

そういえば、あと
商品ページにリンクを貼る方法
商品ページに画像を貼る方法、
表を作成する方法が残っていました。

 

 

これらの手順もとても簡単に覚えられますので、
また別の記事でご説明したいと思います。

 

 

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

 

 

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

 

コメントを残す

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