スポンサーサイト

--年--月--日 --:--

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

【超かんたんcss】外部リンクにだけアイコンを表示する

2012年03月28日 23:20

タイトルそのままです。外部リンクの右側にアイコンをつけるようにcssをいじりました。
こんなかんじです↓
 Google

jqueryでcssを付与するつもりでしたが、cssだけでできたのでらくちんです。

ポイントはふたつあります。
ひとつめのポイントは、私のブログの場合右カラムに色々埋め込んでいて、
それら各リンクにいちいちアイコン付けられたら困るため、エントリー内のみを対象にする点。
ブログを使っているかたはエントリーのくくりになんというクラスが定義されているかテンプレを見て確認するといいと思います。
ちなみに私が現在使用しているテンプレでのエントリークラスは.entryというクラス名でした。

もうひとつのポイントは、外部リンクにだけアイコンをつける=自分のURLは除外するという点。
たとえばわたしのブログはhttp://ruicosweets.blog116.fc2.com/ですが、
FC2は画像のURLが違うようなので、 http://blog-imgs-48.fc2.com/の2つを除外することにします。

リンクのカラーがhoverとactiveのとき変わるので、アイコンもhover&active用を用意しました。
ということでやっつけですが以下cssソースです。


/*エントリー内のリンクにアイコン付与(通常)*/
.entry a[href^="http"] {
background:url("アイコンのURL") no-repeat right center;
padding-right:15px;
margin-right:5px;
}

/*エントリー内のリンクにアイコン付与(hover&active用)*/
.entry a[href^="http"]:hover,
.entry a[href^="http"]:active {
background:url("アイコンのURL") no-repeat right center;
padding-right:15px;
margin-right:5px;
}

/*自分のサーバはアイコン付けないよ*/
.entry a[href^="自分のサーバURL"],
.entry a[href^="自分のサーバURL"]:hover,
.entry a[href^="自分のサーバURL"]:active,
.entry a[href^="自分の画像サーバURL"],
.entry a[href^="自分の画像サーバURL"]:hover,
.entry a[href^="自分の画像サーバURL"]:active{
background:none;
padding-right:0px;
margin-right:0px;
}


複雑な条件の場合はjqueryを併用するのがいちばんだと思います。
そういえば以前、ソースをきれいに整形するなんたらっていうプラグインを試みたんだけど、
どうもうまく表示できないので(FC2のエスケープ処理の問題かと)放置していたのを思い出しました。
あいもかわらず放置しますよ。


CSS3デザインブック 仕事で絶対に使うプロのテクニックCSS3デザインブック 仕事で絶対に使うプロのテクニック
(2012/03/21)
MdN編集部

商品詳細を見る
関連記事
スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://ruicosweets.blog116.fc2.com/tb.php/633-a481714d
    この記事へのトラックバック


    最近の記事


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