ライブドアブログカスタマイズの覚書

スタイルシート（CSS）を「リンキングスタイルシート」で設定した場合、一度設定したスタイルシート（CSS）のタグは、設定したセレクタすべてに適用されてしまいます。

これでは、自由なはずのスタイルシート（CSS）で、表現が限定されてしまうという不都合が生じることがあります。

このことについては、「スタイルシート（CSS）の設定方法」で説明しました。

そこで、今回は、この回避策を取り上げます。

例えば、ある段落の文字（テキスト）の色は青、それ以外の段落の文字（テキスト）の色は黒、といった指定をしたいときには、「idセレクタ」と「classセレクタ」を利用するのが有効です。

スタイルシート（CSS）のセレクタに、「id（アイディー）」と「class（クラス）」で識別指定すれば、個別の条件で、スタイルシート（CSS）を設定できます。

このように個別の条件を指定したスタイルシート（CSS）の記述の仕方は、個別の条件を指定したい「id」や「class」の名前の後に、スペースを空けて、タグを記述します。

「id」と「class」については、「スタイルシート（CSS)の2つの名前」を参考にしてください。

ここで、ひとつ例を挙げます。

この例は、コメントで質問をいただいた内容への回答です。

「記事のタイトルから個別記事ページへのリンクを張る」で説明した方法で、記事のタイトルから個別記事ページへのリンクを張ると、タイトルの文字の色が本文などで指定されているリンクと同じ色になってしまいます。これを回避するにはどうすればいいか？

まず、「記事のタイトルから個別記事ページへのリンクを張る」方法は、HTMLファイルに下記のように記述しました。

<h3 class="title"><a href="<$ArticlePermalink$>">
<$ArticleTitle ESCAPE$></a><IfArticleRating>
<$ArticleRatingIcon$></IfArticleRating></h3>

<$ArticlePermalink$>は、記事のURLを表しています。それをリンクを設定する<a>〜</a>タグで、記事のタイトルを表す<$ArticleTitle ESCAPE$>と囲み、個別記事ページにジャンプするようにしています。

このままでは、記事のタイトルの文字の色は、他のリンクと同じ色になります。

なぜかというと、一度設定したスタイルシート（CSS）のタグは、設定したセレクタすべてに適用されてしまうからです。

<a>〜</a>タグを指定しているスタイルシート（CSS）でどのように記述されているでしょうか？

補足ですが、<a>タグのことは「アンカー」タグといい、<a>〜</a>挟まれた文字列をアンカーテキストと呼びます。

ライブドアブログのテンプレート「シーズン空02」を例にすると、スタイルシート（CSS）には、下記のような記述がされています。

a{color:#666666;text-decoration:underline;}
a:link{}
a:visited{}
a:active{}
a:hover{text-decoration:none;}

<a>タグの文字の色は、「color:#666666;」というように、「666666」という色が指定されています。

また、「シーズン空02」のスタイルシート（CSS）には、他にも下記のような記述もあります。

#banner a{color:#fff;text-decoration:none;}
#banner a:link{text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:hover{color:#fff;text-decoration:underline;}

これは、「banner」というid名の範囲の<a>タグの文字の色は、「color:#fff;」というように、「ffffff」という色が適応されるように指定しています。

これと同じようにすれば、記事のタイトルのリンクの色は変更できます。

記事のタイトルを表す<$ArticleTitle ESCAPE$>と記事のURLを表す<$ArticlePermalink$>の範囲は、<h3 class="title">というように、「title」というclass名が指定されていますので、下記のような記述を付け加えます。

.title a{color:#666666;text-decoration:underline;}
.title a:link{}
.title a:visited{}
.title a:active{}
.title a:hover{text-decoration:none;}

しかし、このままでは、記事のタイトルの文字の色は、他のリンクと同じ色のままなので、<a>タグの文字の色を指定している部分、「color:#666666;」の、「666666」という部分を指定したい色のコードに変更します。

文字の色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

また、下記の部分、

.title a:link{}
.title a:visited{}
.title a:active{}

ここの部分（疑似クラス）には、中身がないので、付け加えは必要ありませんが、わかり易いように記述しておきました。

また、「text-decoration:underline;」は、アンダーライン（下線）を表示するという指定なので、必要がない場合には、「text-decoration:none;」に変更してください。

疑似クラスセレクタについては、下記のサイトが参考になります。
TAG<index>
http://www.tagindex.com/stylesheet/link/link_color.html

ライブドアブログのカスタマイズ - livedoor Blog 共通テーマ