aタグ(リンクタグ)とimgタグ(画像タグ)を直接使えるようにしてみました

[ガラケー版(QRコード)] 総閲覧回数:3,925,327回 / ブログ拍手:2,554
作品DB等各サービスの機能追加情報や、技術系・面白系記事を中心に提供。
記事の投稿は基本Twitterでも告知させて頂いています。
連絡は作品DBの論客の方なら私書、DB外ユーザの方ならメールTwitterで可能です。
アクセス記録[推移 / PV内訳(過去1日 / 過去1週間) / 外部アクセス元 (昨日 / 過去1週間) / ログイン論客足跡]
プロフィール私書(メール)
   /   /送済
評価(一覧   /)
投票   /共:   /
ファン登録
作品/情報/
DB構築()
ブログ
[書く]
攻略記事リンク集
My Play List
<=次の記事 日記の同一記事内では同一幅で表示されるようにしてみました
=>前の記事 色々調整

1.
2008/03/22 作品DB開発/運用 > aタグ(リンクタグ)とimgタグ(画像タグ)を直接使えるようにしてみました」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]拍手:2個

作品DBでは、URLは自動的にリンクに、画像のURLは自動的に画像に変換されますが、直接aタグ(リンクタグ)とimgタグ(画像タグ)も使えるようにしてみました。
使い方はHTMLの文法と全く同じです。

使い方:
< a href="リンク先のURL">リンク先名</a>
< img src="画像のURL" width="横幅の数字">
↑aとimgの前の空白はソースが見えるようにする為にわざとですが使う時にはそれ無しで。
URLは必ず"..."として囲む必要があります。

例:
a(リンクタグ)の例: < a href="http://www.accessup.org/anime/">作品DB< /a>
作品DB

img(画像タグ)の例: < img src="http://static.flickr.com/23/26241198_906c6c821e.jpg?v=0" width="50">


画像(imgタグ)をリンクタグ(aタグ)で囲むと画像をクリックするとそれがリンクになる
< a href="http://www.yahoo.co.jp/">< img src="http://static.flickr.com/23/26241198_906c6c821e.jpg?v=0" width="50">< /a>


普通自動的にURLをリンクに変換したり画像に変換してくれたりするのに、ちょっと小難しいHTMLタグを自分で書くことによる利点は、長いURLを表示しなくすること(任意の文字列で代替すること)によって記述を短くしたり、大きい画像の横幅等を自分の好きなサイズに調整できることです
これによって、書き物の左下の部分のようにスペースが限られたところでの表現のオプションを増やすことができます。

なお、aタグの場合target="_blank"を加えると、新窓でリンク先を開かせることができるという機能も、場合によっては役立つかもしれません。
例: < a href="リンク先のURL" target="blank">リンク先名</a>
作品DB(新窓で開く)

あと、これは中々難しいですが、imgタグはalign="left"という属性をつけると、そのまま画像の右に文字を回りこませることが出来ます。
< img src="画像のURL" align="left">

こんな感じ
align="left"を指定したから画像の右に書ける

これを解除する為のタグの
< br clear="all">
を使えるようにしました。
(ここまで来ると最早HTMLタグ打ちの世界ですが知っておいて損はしないでしょう)

コメントする2個


[他の記事も読む]
<=次の記事 日記の同一記事内では同一幅で表示されるようにしてみました
=>前の記事 色々調整


大分類が「作品DB開発/運用」の記事
この論客の記事全て
↑上へ