デッサン狂

デッサン狂

◇HTMLタグについて

楽天で使用できるHTMLタグについて
日記を書き込む際やページを作成する際に、HTMLタグを使うことにより、文字のサイズを大きくしたり色を変えたりすることができます。ここではその中でも楽天広場で使用できるものを集めてみました。
注)掲示板などの機能によって使えるタグが異なります。
●HTMLとは何ですか?
・HTMLとは、ホームページ上で文字や画像をどのように表示するか定義するための言葉です。

・タグと呼ばれるカッコで文字などをくくることでデザインや大きさを変えたりすることができます。

・タグは「<」と「>」ではさまれた<○○○○>のような形をしており、デザインを変えたい文字などを「<○○○○>HTMLを適用させる文字列</○○○○>」のようにくくることで機能します。 

・例えば、文字をセンタリング(中央揃え)したい場合は<center>タグを使用し、「<center>センタリングする文字列</center>」のようにすることで文字をセンタリング(中央揃え)する事ができます。
●他のページにリンクを張りたい
[ 表示例 ]  「楽天市場へリンク」

[HTMLタグ] <a href="http://www.rakuten.co.jp/">「楽天市場へリンク」</a>

1.自分のホームページを他のホームページとリンクをさせたい時は、 <a href="リンク先のアドレス">リンク先のホームページの名前</a>と書くと 文字をクリックして他のページにジャンプできるようになります。

(アドレスとは、楽天市場の場合「http://www.rakuten.co.jp」 のようにhttp://で始まるものをさします)

下の「ここにアドレスを入力」という部分にリンクしたいページの アドレスを入力してみてください。(http://から全て)

<a href="ここにアドレスを入力">ここに表示したい名前</a>


2.上の文字を全て選択し、右クリックでコピーして、日記や ページ作成などの入力画面にはりつければ、リンクすることができます。

[完成例]

<a href="http://www.rakuten.co.jp">楽天市場</a>へジャンプ

と書くと...

楽天市場 へジャンプ

のようにリンクがはられます。
●画像を表示したい/貼りたい
 [HTMLタグ] <img src="http://plaza.rakuten.co.jp/img/・・・・">

・画像掲載方法

 楽天広場編集ページのメニューにある「画像倉庫(画像の登録管理)」をクリックします。

 「登録した画像の一覧」の下にある縮小画像をクリックします。

 画像が通常の大きさで表示されます。

 画像の下に表示されている「この画像を表示する」の欄に表示されているHTMLタグの部分をコピーします。 

 ページを作成時に、このHTMLタグを貼り付けると画像が表示されます。

・日記への画像掲載方法

 日記に画像を掲載したい場合は日記入力ページの「画像を掲載する」の欄で「楽天広場・画像倉庫に登録されている画像を使う」を選択してください。画像を選択するにはあらかじめ「画像の倉庫」への登録が必要です。

 「掲載画像の選択」から掲載したい画像を選択します。

 そして「掲載画像レイアウトの選択」からお好きなレイアウトを選択してください。
 ※なお複数の画像を1つの記事に載せたい場合などは、日記にもHTMLタグを貼り付けて画像を掲載することが可能です。
 またレイアウトを事前に確認することができます。「プレビューを開く」をクリックしてご確認ください。

 ※他のページ等からの画像の無断転写など、著作権に違反した利用は禁止されています。

●文字の色を変えたい
[ 表示例 ] 文字の 「色を」 変える

[HTMLタグ] 文字の<font color="blue">「色を」</font>かえる

1.色を変えたい文字を<font color="色名">と</font>でくくると、 文字の色を変えることができます。(red,blueなど)

下の「ここが赤くなる」という部分を書きかえてみてください。

<font color="red"> ここが赤くなる </font>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ文字の色を変えることができます。

※color="色名"の色の部分を変えると他の色にすることもできます。 ↓のようにblueやgreenなど様々な色が使用できます。

white  black gray blue
cyan
green lime khaki
yellow
orange brown red
pink
purple violet Aqua


#FFFFFFのようにカラーパレットで指定することも可能です。

[完成例]

ここから先が <font color="blue"> 青く </font> なります。

と書くと...

ここから先が 青く なります

と文字が色をかえて表示されます。
●文字の大きさ(サイズ)を変更したい
[ 表示例 ] 文字を 「大きく」 表示させる

[HTMLタグ] 文字を<font size="7">「大きく」</font>表示させる

1.大きさを変えたい文字を<font size="サイズ">と</font>でくくると、 文字の大きさを変えることができます。(1~7まで)

下の「大きくなります」という部分を書きかえてみてください。

<font size="7"> 大きくなります </font>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ文字の大きさを変えることができます。

※size="サイズ"の色の部分を1~7の数字に変えると文字の大きさを変えることができます。 ↓のように、1がもっとも小さく7がもっとも大きいサイズとなります。



[完成例]

ここから先が <font size="7"> 大きく</font> なります。

と書くと...

  ここから先が 大きく なります。



と文字がサイズを変えて表示されます。
●文字を太くしたい
[ 表示例 ] 文章を文字を 「太字」 で表示する 表示する

[HTMLタグ] 文字を<b>「太字」</b>で表示する

1. 太くしたい文字を<b>と</b>でくくると、その文字を太く表示することができます。

下の「太くなります」とかかれた部分を好きな文章に書きかえれば、 太い文字で文章を表示することができます。

<b> 太くなります </b>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ、文字を太くして表示することができます。

[完成例]

ここから先が <b> 太く </b> なります。

と書くと...

ここから先が 太く なります。

のように文字が太くなって表示されます。
●文字をセンタリング(中央揃え)したい
[ 表示例 ] 文字を↓

「センタリングする 」


[HTMLタグ] <center>「センタリングする」</center>

1.センタリングしたい文字を<center>と</center>でくくると、 文字をセンタリングすることができます。

下の「中央に表示されます」という部分を書きかえてみてください。

<center>中央に表示されます</center>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ文字をセンタリングすることができます。

[完成例]

  <center>中央に表示されます。</center>

と書くと...

中央に表示されます。


と文字が中央揃えになって表示されます。
●文字を斜体で(ななめに傾けて)表示したい
[ 表示例 ] 文章を 「斜体で」 表示する

[HTMLタグ] 文字を<i>「斜体で」</i>で表示する

1. 斜体にしたい文字を<i>と</i>でくくると、その文字を斜体にすることができます。

下の「斜体になります」とかかれた部分を好きな文章に書きかえれば、 文章を斜体にすることができます。

<i> 斜体になります </i>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ文字を斜体にして表示することができます。

[完成例]

ここから先が <i> 斜体に </i> なります。

と書くと...

ここから先が 斜体に なります。

のように文字が斜体になって表示されます。
●文字に取り消し線をつけたい
[ 表示例 ] 文字に 「取り消し線」 をつける

[HTMLタグ] 文字に<s>「取り消し線」</s>をつける

1. 取り消し線をつけたい文字を でくくると、 その文字に取り消し線がつけられます。

下の「取り消し線がつきます」とかかれた部分を好きな文章に書きかえれば、 文章に取り消し線をつけることができます。

<s> 取り消し線がつきます </s>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ、文章に取り消し線をつけて表示することができます。

[完成例]

ここから先に <s> 取り消し線が </s> つきます。

と書くと...

ここから先に 取り消し線 がつきます。

のように文字に取り消し線がついて表示されます。
●文字をテロップのように動かして表示したい
[ 表示例 ] 文字を↓ 

「テロップのように動きます。」 [HTMLタグ] 文字を↓<marquee>「テロップのように動かす」</marquee>

※このHTMLタグは、利用者の環境によっては正常に動作しない場合があります。(Internet Explorerのみで動作し、Netscape Navigator では動作しません。)

1.テロップのように動かしたい文字を<marquee>と</marquee>でくくると、 文字を動かして表示することができます。

下の「テロップのように動きます」という部分を書きかえてみてください。

<marquee>テロップのように動きます</marquee>


2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの 入力画面にはりつければ、文字をテロップのように動かせます。

[完成例]

  <marquee>テロップのように動きます。</marquee>

と書くと...

テロップのように動きます。

と文字が動いて表示されます。
●表(テーブル)を書きたい
[ 表示例 ]

ショッピング 楽天市場
ホームページ 楽天広場


[HTMLタグ] <table border="1"><tr><td>ショッピング</td><td>楽天市場</td></tr><tr><td>ホームページ</td><td>楽天広場</td></tr></table>

1.表を書くには<table>を使用します。<tr>と</tr>でくくられた横の部分が行となり <td>と</td>でくくられた部分が縦の列となります。 これらを<table>と</table>でくくると、表として表示されます。

※</table>などの終了タグを書き忘れた場合、ページが表示されない場合があるのでご注意ください。

※日記にテーブルタグを使用する場合に、改行タグ<br>を入れたり、フリーページで自動改行(初心者向け)にした場合に、余計な隙間が表示されることがあります。

<table border="1"><tr><td>1行目の1列目</td><td>1行目の2列目</td><td>1行目の3列目</td></tr><tr><td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td>/<tr></table>


2.上の文字を全て選択し、右クリックでコピーして、ページ作成などの入力画面にはりつければ表を書くことができます。

※border="数字"の部分は表の線の太さになります。

[完成例]

<table border="1"><tr><td>1行目の1列目</td><td>1行目の2列目</td><td>1行目の3列目</td></tr><tr><td>2行目の1列目</td><td>2行目の2列目</td><td>2行目の3列目</td>/<tr></table>

と書くと...

1行目の1列目 1行目の2列目 1行目の3列目
2行目の1列目
2行目の2列目 2行目の3列目


と表になります。 


© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: