--. --. -- 

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


blogram投票ボタン
Share |

 
2009. 05. 14 

別窓アイコン設置しました

やりたいことが出来ると嬉しいもので。゚+.(・∀・)゚+.゚
記事内のリンクの前にアイコンを付けたいと思っていて、
何か良い方法が無いかな~といろいろ検索したら、良いの見つけましたw

<target="_blank">と指定したaタグにのみ背景画像としてアイコンを付けるという技です。
こんな感じです。

ブログのトップページに別窓で飛びます。

わたしはとにかく見た目がスッキリでシンプルなのが好きなので、
リンク色も普通の文字と同じ色にしちゃってるんです。
だからリンクがあるのかどうかもわかり難い(^▽^;)
左にアイコンがあると「あっ、リンクだ。」と思っていただけるかと(笑)
文中にあっても こんな感じで わかりすい、、、、、と思うのですがどうでしょ?
アイコンの色をもうちょっと目立つようにしたいのですが、何色が良いか決まりません;
無難に黄色? とにかく決まったら変えますw
 ※追記 : 色変えました。 やっぱり黄色( ̄∇ ̄)

元のCSSはこんな感じです。
これは右にアイコンを持ってくる場合。
a[target="_blank"]{
background:transparent url(画像URL) center right no-repeat;
padding-right:15px;
}

わたしは左に表示したかったので right を left に変えました。
でもそれだけではブログ内の別窓リンク全てに適用されてしまいます。
左のメニュー部分のリンクも全て。
記事内だけのリンクに限定させるために、わたしの場合は
.entry-content a[target="_blank"]{
background:transparent url(画像URL) center left no-repeat;
padding-left:15px;
}

という風に記事部分を囲っているクラス名を付け足しました。
これで完璧。゚+.(*'∇'*)゚+.゚


Cool Web Window - 外部リンク用アイコンを作ってみました (感謝☆)


※追記※
別窓を開かないリンクにはピンクのアイコンを使用することにしましたw
ブログトップへ~(*'ー'*)v



blogram投票ボタン
Share |

Tags : カスタマイズ    

    

Comments

Write

サイト管理者にのみ通知する


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。