スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
人気ブログランキングへ ブログランキング・にほんブログ村へ


特定範囲のリンク色変更

 前から本文中のリンクの色が薄くて気になってたので変更することにしました。
 以下の例は私が使っているテンプレート"sky_cube"の場合です。

1.テンプレートのCSSでリンク色を指定している部分を探します。
 あっさり見つかりました

a {
text-decoration: none;
color: #477EAB;
}

a:hover {
text-decoration: underline;
color: #CC0000;
}

 ここでリンクは青っぽい色、カーソルを重ねたら赤っぽい色を指定しています。
 しかし、この部分で色を指定すると画面全体に影響が出ます。
 今は記事の部分だけ変えることにします。

2.テンプレートのhtmlで本文記事の場所を探します。
 これはブラウザで表示してソースを見て探すのが分かりやすいでしょう。

 <div class="entry_body">~</div>の間に本文記事が入ってました。

3.CSSで"entry_body"のリンク色を指定します。
 次のような感じです。

div.entry_body a:link {color: #1111cc;font-weight: bold;}
div.entry_body a:visited {color: #800080;font-weight: bold;}
div.entry_body a:hover {color: #cc0000;font-weight: bold;text-shadow: #888888 1px 1px 1px;}

 色を変えるついでに文字を太くします。
 文字色は各自お好みで変えてください。ちなみに#1111ccはGoogle AdSenseと同じ色です。
 ここで「text-shadow: #888888 1px 1px 1px;」はFireFox用の指定です。文字に影を付けます。
 この3行は後の事を考えてdiv.entry_body { }の近くに書いたほうが良いでしょう。

4.ついでに他のリンク(サイドの最新記事、コメント、トラバなど)の色も変えておきます。
 オリジナルではa:hoverしか指定していないので、次のように変更します。
 a:hover のtext-decoration: underline; は外しました。

a:link {}
a:visited {color: #800080;}
a:hover {
color: #cc0000;
text-decoration: none;
text-shadow: #888888 1px 1px 1px;
}

5.これでほとんど思い通りの指定ができました。
しかし一つ問題発生。最新の記事の後に自動で追加される広告までリンクの色が変わってしまうことです。
 そこで<div class="entry_body">~</div>の内側にもう一つクラスを作ります。
 <div class="entry_body_mytext">~</div>

<div class="entry_body">
<div class="entry_body_mytext"> ←追加
<%topentry_body>
<!--more_link-->
<p class="entry_more"><a href="<%topentry_link>#more" title="<%topentry_title>"><%template_extend></a></p>
<!--/more_link-->
</div><!-- class="entry_body_mytext" --> ←追加
<!--more--><div id="more"><%topentry_more></div><!--/more--> ←これが拍手ボタンと広告

 そして、3.で追加したCSSもちょっと修正

div.entry_body_mytext a:link {color: #1111cc;font-weight: bold;}
div.entry_body_mytext a:visited {color: #800080;font-weight: bold;}
div.entry_body_mytext a:hover {color: #cc0000;font-weight: bold;text-shadow: #888888 1px 1px 1px;}


 これで完成です。
 InternetExprolerを使ってる人はFireFoxででも見てみてください。
 text-shadowの効果が分かると思います。




 ちなみに私が使ってるCSS辞典はこれです。
 旧版から使い続けて八年になります。
 IE7, 8, FireFox2, 3の違い他、各種情報が分かりやすくまとめられていて、手放せない一冊です。



スポンサーサイト
人気ブログランキングへ ブログランキング・にほんブログ村へ


コメント

非公開コメント

プロフィール

wombat

Author:wombat
名前の由来は家にある、このぬいぐるみからです

Sponsored Link
カルビー フルーツグラノーラ
カルビー フルーツグラノーラ

My Keepon マイキーポン
My Keepon マイキーポン

ホイップる
明治チョコレートセット

ホイップる 明治チョコレートセット
きのこの山、たけのこの里、アポロなどがアクセに





ウイルスバスター トレンドマイクロ・オンラインショップ







吉川友 YOU! ~the DVD~
吉川友 YOU! ~the DVD~

秋山莉奈 ザ・おしり3 [DVD]
石田紗英子 晴れのちドキドキ[DVD]

秋山莉奈 ザ・おしり3 [DVD]
秋山莉奈 ザ・おしり3 [DVD]

秋山莉奈 ザ・おしり2 [DVD]
秋山莉奈 ザ・おしり2 [DVD]

秋山莉奈 ザ・おしり[DVD]
秋山莉奈 ザ・おしり[DVD]

Cica写真集
Cica loves YOU!

Cica写真集 Cica loves YOU!

CicaファーストDVD
ハジメマシテ…Cicaデス

CicaファーストDVD ハジメマシテ…Cicaデス

1/32 小惑星探査機 はやぶさ 特別メッキ版 【Amazon.co.jp限定販売】
1/32 スペースクラフトシリーズ No.SP 小惑星探査機 はやぶさ 特別メッキ版 【Amazon.co.jp限定販売】

魔女の宅急便 [Blu-ray]
魔女の宅急便 [Blu-ray]

となりのトトロ [Blu-ray]
となりのトトロ [Blu-ray]

天空の城ラピュタ [Blu-ray]
天空の城ラピュタ [Blu-ray]

風の谷のナウシカ [Blu-ray]
風の谷のナウシカ [Blu-ray]


参考記事

Sponsored Link



ブログ内検索
最新記事

  全記事一覧
カテゴリ
月別アーカイブ
人気記事
   
アクセスランキング
   
最新コメント
最新トラックバック
リンク
RSSリンクの表示
QRコード
QRコード
Counter

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