よく使うHTMLタグ一覧 | ブログアフィリエイトで稼ぐ3つのポイントをオタク主婦が公開中

文字の色もサイズもかえたい時

文字の色を変更したいときは

<font color="red">赤色になるよ</font>

文字のサイズを変更したいときは

<font size="5">大きさは5だよ</font>

でしたね。

じゃぁ文字の色もサイズも変更したいときは?

そんなときは

<font size="5" color="red">文字は赤でサイズは5だよ</font>

表示するとこうなります。
文字は赤でサイズは5だよ

うまく表示されないときは半角の空白がないとか
ちゃんと>で閉じられていない時などです。
表示されなくても焦らずによ~く見ると
見つかりますよ^^

文字のサイズを変更する

文字のサイズを変更したい時のタグは

<font size="5">大きさは5だよ</font>

表示されるとこうなります。
大きさは5だよ

数字の”5″の部分を変更すると

size=”1″ 大きさは1だよ
size=”3″ 大きさは3だよ
size=”5″ 大きさは5だよ
size=”7″ 大きさは7だよ

大きさが変わります^^

ここぞというとき、たとえば・・・

焼き芋たべたーーーーい!!

こんなふうにw
私の心の叫びです^^;

是非使ってみて下さいね^^

文字の色を変更する

文字の色を赤や青にする為のタグです

<font color="red">赤色になるよ</font>

表示されるとこうなります。
赤色になるよ

他の色も”red”の部分を変更すると
“blue” 青色になるよ
“green” 緑色になるよ
“orange” オレンジ色になるよ
“Fuchsia” ピンク色になるよ

文字の色が変わると読みやすくなりますので
伝えたい言葉などに使って下さいね^^

よく使うHTMLタグ一覧表

タグ一覧表

画像にリンクを貼る

画像にリンクを貼るには

<a href="リンク先URL"><img src="画像のURL" alt="画像の説明" /></a>

花の正体

画像をクリックしてみてね

こんな感じで画像にリンクが貼れるようになります。インフォトップなどで用意されているアフィリエイトリンクですが、作成フォームでも表示されますがJavaスクリプトの作動に影響が出てアフィリエイト報酬が正常に認識されない例があるのでメルマガ用を使うようにして下さいね。使い方は先ほどのタグと同じです。

<a href="メルマガ用のアフィリURL"><img src="画像のURL" alt="画像の説明" /></a>

画像は自分のPCに一旦保存してサーバーへアップロードして下さいね^^

画像の横にテキストを回り込ませる

画像の横に文字を表示させたい時は

<img src="画像のURL" alt="画像の説明" align="left" />
align=”left”

スーパー花

leftにすると画像が左で文字が右に

<img src="画像のURL" alt="画像の説明" align="right" />
align=”right”

スーパー花

rightにすると画像が右で文字が左に

ながーく文字を書いていくと画像の横を続けて文字が表示されます。

画像があるのとないのとではサイトの印象がまったくかわってくるのでどんどん利用してくださいね^^

画像のサイズを変更する

画像のサイズを変更したいときは

<img src="画像のURL" width=横の長さ height=高さ alt="画像の説明" />
width=横の長さ
height=高さ
横の長さと高さを変更します。

スーパー花
この画像のサイズを変更したい時は

<img src="http://1hana.info/wp-img/superhana.gif" width=50 height=73 alt="スーパー花" />
ちっちゃくなりました^^
スーパー花

横と高さの比率が変わると変形してしまうので気をつけて下さいね^^

<img src="http://1hana.info/wp-img/superhana.gif" width=100 height=73 alt="スーパー花" />
スーパー花
でぶった(笑)

パソコンに保存している画像のサイズを確認したい時は
画像の上で右クリック→一番下のプロパティをクリック→概要→幅・高さでわかります。
(概要でわからないときは簡易版になっているので詳細設定をクリックして下さいね。)

画像(img)を表示させる

撮った写真やイメージ画像を表示させるタグは

<img src="画像のURL" width=横の長さ height=高さ alt="画像の説明" />

これで画像が表示されます。
実際に表示されるのはこのようになります。
 ↓
スーパー花

画像のURLが違っていると「alt」で設定した文字が表示されます。
スーパー花

<img src="http://1hana.info/wp-img/superhan.gif" width=120 height=174 alt="スーパー花" />

テキストリンクの貼り方

テキスト(文字)にリンクを貼りたい時は

<a href="http://ここにリンク先URL">ここにテキスト</a>

これでテキストリンクができます。

実際に表示されるのはこのようになります。

ここにテキスト

よく使うタグなのでメモ帳などに貼り付けておくと便利です^^

ブログアフィリエイトで稼ぐ3つのポイントをオタク主婦が公開中 TOP » よく使うHTMLタグ一覧

大賞受賞一覧