最近LivedoorRSSのリンクの色を変更してみたので、その方法について、ご紹介します。
livedoorRSSとは
livedoor 相互RSSとは、livedoorという日本のポータルサイトが提供している、ブログやウェブサイトの相互RSS配信サービスです。
このサービスを利用すると、自分のブログやウェブサイトのRSSフィードを登録し、他のブログやウェブサイトのRSSフィードを受信することができます。そのため、相手のブログやウェブサイトの新着記事を自分のサイトに自動的に表示することができるようになります。
カスタマイズのための下準備
まずは下準備として、CSSをカスタマイズ出来るようにします。
方法は以下の通りです。
1. LivedoorRSSが提供してくれている、CSSをまるまるコピーします。
http://blogroll.livedoor.net/css/default2.css
2.自身のブログサービスのCSSを書けるところに、コピーした内容を貼り付けます。
3.そして最後に、LivedoorRSSの貼り付けコード内にある赤字部分を削除します。
"<script type="text/javascript">
<!--
// -->
</script>
<script type="text/javascript" charset="utf-8" src="https ://blogroll.livedoor.net/js/blogroll.js"></script>
<link rel="stylesheet" type="text/css" href="https ://blogroll.livedoor.net/css/default2.css" />
これによって、LivedoorRSSのデザインが、先ほど貼り付けたCSSを参照するようになりますので、それをカスタマイズしていきます。
参照したのはこちら。
リンクの色を変更する
リンク色を変更するには、下のようにCSSの一番上にある.blogroll-channel * というところに、赤字のところのコードを追加するだけです。これによりリンクの色が変わります。
（#0066c0を他の色コードに変更すると他の色に変えることが出来ます。）
/* ----------------------------------------------- */
/*BlogRoll css
*/
/* ----------------------------------------------- */.blogroll-channel,
.blogroll-channel * {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;
color: #0066c0;
}
その他に、文字をカスタマイズをする場合は、その下にコードを追記していきます。
例えば文字を太字にする場合には、font-weight: bold; をその下に入れると適用されるようになります。
リンクにカーソルをあわせた時の色を変更する。
リンクにカーソルをあわせた時の色を変更したい場合は、次のようなコードを挿入します。
場所はどこでも良いのですが、.blogroll-channel * が閉じられた後（ ｝の後ろ）にでも挿入すればOKです。
.blogroll-channel a:hover {
color: red;
}
以上、liveddor相互RSSのリンクの色を変更する方法についてご紹介しました。
