2020年09月16日

Yahoo!ショッピングで使えるHTMLタグ(PC版)

これまではYahoo!ショッピングのスマホ版、PC版の両方で使用できるHTMLタグを紹介してきました。

今回はYahoo!ショッピングのPC版専用のタグをご紹介します。

centerタグ:文字や画像のセンタリング

ウェブページ内のテキストなどが中心に配置されているのをよく目にするのではないでしょうか。

このようにウェブページ上でセンタリングを行うには「centerタグ」が必要です。

【centerタグの書き方】
<center>中心に配置したいもの</center>

上記のように書くことで<center>〜</center>内のコンテンツを中心に配置できます。

コンテンツにはテキストだけでなく画像も設定できます。

また、以下のように記述しても同じ表示になります。

<center>
中心に配置したいもの
</center>

実際には以下のように使用されます。

【例】
<center>
 <h2>新着情報</h2>
 <p>ツールのアップデート情報やメディア紹介情報などを公開いたします。</p>
</center>

fontタグ:テキストに色付けする

例のようにテキストの色や大きさを指定するには、「fontタグ」を使用します。

fontタグの記述方法は以下の通りです。

【fontタグの書き方】
<font size=”テキストのサイズ” color=”テキストの色”>表示するテキスト</font>

※注意:上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。

fontタグのsize属性でテキストの大きさを指定し、color属性で色を指定します。

size属性には、1や2、3などの数値もしくは、10pxなどの「px(ピクセル)」単位で与えましょう。

color属性には6桁の16進数で「#ed6d1f」のように指定します。

16進数とは数値の表現方法の一種で、我々が普段使っている数値は10進数と呼ばれます。

各色に対応する数値は「カラーコード表」で取得できるので確認してみてください(カラーコード表参考サイトはこちら)。

【例】
<font size=”14px” color=”#ed6d1f”>[B-Spaceご契約特典]</font>

※注意:上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。

uタグ:文字に下線を引く

以下の画像のようにテキストに下線を引くには、

「uタグ」を使用します。

【uタグの書き方】
<u>下線をつけたいテキスト</u>

HTMLでは<u>〜</u>で囲むだけでテキストに下線をつけることができます。

通常のテキストだけでなくh2タグで作った見出しなどにも下線をつけることも可能です。

【例】
<u>Hello Shopleap</u>

まとめ

今回は、Yahoo!ショッピングのPC版専用で使用できるHTMLタグについてご紹介しました。

これらは、主にウェブページの装飾を整えるタグです。

これらのタグを使用すればウェブページの簡単なデザイン指定ができるでしょう。

HTML作成時のタグ記述ミスを防ぐためには、Yahoo!JAPANストアクリエイターProのHTMLタグ確認ツールが便利です。

また、B-SpaceではHTML作成に便利なサービスを数多く提供しています。

B-Spaceをご活用いただければ、より簡単に繁盛店のにぎわいを簡単に作れます!

やっぱりHTMLって難しい・・・
HTMLを勉強している時間はなかなかない・・・
というストア様はぜひ一度B-Spaceをお試しください!

初めてB-Spaceをご利用されるストア様は1カ月の料金が無料になる特典実施中!

お申込みはこちら

こちらの記事もどうぞ