==教えることは自分育て==

カテゴリ:├タグでサムネイル( 4 )
|TOPに戻る
画像から別の画像へのリンク
ある画像から、別の画像へのリンクをタグで作りましょう。
最初に画像を2枚アップしておきます。

椿


画像タグはリンクタグと組み合わせて使うと、デフォルトでは画像の周りに枠が付きます。
その枠を除くには、imgの方に、border="0" を入れましょう。枠が消えます。
                        ↓ 
椿

最後に画像のエキサイト擬似タグを削除します。決してアップロード済みの画像は削除しませんように。

参考までに、下にサムネイルのタグを載せておきます。コピペして画像URL だけ変えて利用なんていうのもよし!! でも最後は自分でタグを書き込んで、作成できるようにしましょう。

何も指定しない(デフォルト)ですと、左寄せになります。右寄せのタグは、align="right "
左寄せはalign="left"です。
今回は<center></center>で挟んで中央に配置しました。

<center><a href="http://pds.exblog.jp/pds/1/200706/18/21/b0063421_16542246.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200706/18/21/b0063421_1654525.jpg" alt="椿" width="240" height="180" border="0"></a></center>
[PR]
by otomi7771 | 2007-06-18 16:54 | ├タグでサムネイル |TOPに戻る
サムネイル(1)
サムネイルとは、「親指の爪」の意から転じて縮小された画像のこと。通常は多数の画像を一覧表示するために使う手法です。小さい画像をクリックすると同じ画像が大きく拡大されて表示されます。

バラ


まず大きな画像を1枚UPします。(←この場合400×300)

最初は画像タグを書きます。
<img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"> (←幅と高さを小さく設定して、見かけを小さくします。縦・横の比率は変えないように。)
                 ↓
画像をリンクタグで挟みます。この時画像URLは同じものです。
                 ↓
<a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a>
                 ↓
中央寄せにしました。これで出来上がりです。
<center><a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a></center>
[PR]
by otomi7771 | 2007-06-18 13:07 | ├タグでサムネイル |TOPに戻る
サムネイル(2)
2行×4列のサムネイルを作って見ましょう。

まず8枚の画像をUPします。

2
一組のサムネイルはもう出来ましたね。画像はデフォルトでは、左寄せで表示されます。それをコピー&ペーストすると画像はくっつきます。



そこで一組目にインラインCSSで、<img>にmarginを設定すれば余白ができます。
タグは下です。尚、小さい画像サイズは120×90にしました。
<img src="http://pds.exblog.jp/pds/1/200605/22/41/b0018441_3182314.jpg" width="120" height="90" border="0" style="margin:2px;">



一枚目のサムネイルのタグを8枚コピー&ペーストします。
余白がなくなれば自動的に下に回ります。



画像のURLを替えれば、はい出来上がり。



160×120にすると、下のようになります。


[PR]
by otomi7771 | 2007-06-18 11:04 | ├タグでサムネイル |TOPに戻る
サムネイル(3)
このサムネイルは<div>で枠を作っています。そして、その中に画像と文字を配置して画像はサムネイルにしています。p14の基本的な枠の最後に勉強します。

上・・・擬似タグとタグの混在。
下・・・タグのみ。 少し難しいですね。

b0063421_13562.jpg
月の輪椿
草野町椿ウォーキング
b0063421_22322939.jpg
岩根椿
草野町椿ウォーキング



月の輪

月の輪椿
草野町椿ウォーキング
月の輪

岩根椿
草野町椿ウォーキング



<div>の枠を二つ並べたいときは、スタイルに float:left; を付け加えます。
[PR]
by otomi7771 | 2007-06-18 10:04 | ├タグでサムネイル |TOPに戻る