RSSフィードのデザイン変更 | 厨でもわかるライブドアブログのいじりかた




前回はRSSフィードの設置方法を記述しました。
今回はそのRSSフィードのデザインの変更方法です。
2ちゃんねるブログには必須に近いコンテンツなので、
これから2ちゃんねるブログを作るかたでRSSフィードの設置方法などがわからない方は読んでもらえると、タメになるかも。




注:
この記事はドリコムRSSを使用していることを前提でお話しています。
詳しくはうちのブログのカテゴリのHTMLあたりを見とけって。





とりま、今回はYahoo風なRSSフィードを作ってみました。
2008/03/15現在のこのブログのRSSのデザインです。




では解説に入ります。

下記のファイルを「右クリック→対象をファイルに保管」を選んでください。



ドリコムRSSは下記のような構造になっています。



/* ドリコムRSS全体 */
.drecom {
}

/* リストカテゴリーのデザイン */
.drecomrss_blog_list_category {
}

/* ブログリストに登録しているブログの記事タイトル */
.drecomrss_blog_list_item {
}

/* 広告部分 */
.drecomrss_blog_list_powered {
}




これさえ分かればあとはこっちのものだよね(´ω`)
これに対応したCSSを記述してあげればいいだけだもん。

前回作ったファイルに早速記述してみましょう!



え?どこにかって?

それは


<head>
<title>RSSのタイトルだよ。おっぱい。</title>

<style>
->ここに記述
<style>

</head>



もちろん外部にCSSファイルを用意して読み込ませても(・∀・)イイ!!



では説明します。



.drecom {
text-align:left;
background-color:white;
}

class="drecom"で囲われているソースは全て左詰ですよー。
背景色は白だおー!って説明。



.drecomrss_blog_list_category {
margin:0px;
background: #EDF1FF;
width:100%;
color:black;
padding:3px 0px 5px 0px;
display:block;
border-bottom : 1px solid #57718F;
}

class="drecomrss_blog_list_categoryで囲われているソース、タイトルに当たる部分の設定です。
注目すべきは・・display:blockかなあ。
背景色の注意点。
Yahooは画像を使ってグラデーションにしてます。
画像用意するのが面倒なDJ OTZMAはグラデーションの中間色あたりを選びました。



.drecomrss_blog_list_item {
margin:0 0 0 5px;
padding: 0px;
font-size: 12px;
line-height: 1.33em;
color:#0000FF;
font-wight:normal;
}

これは各ブログの記事のタイトル部分の装飾だね。
注目すべきはline-height。
Yahooは1.33em。だからこれも1.33em。
font-sizeもYahooと同じ12px。



.drecomrss_blog_list_powered {
margin-top: 5px;
}

特に説明いらないよね。





上記の通りにHTMLファイルに記述し、アップロードをしてみればわかると思います。
微妙に違うwww


うちのRSSにはさらに下記のような設定が施されています。





.category_border {
padding: 0 5px;
}

div.drecom br {
line-height: 0px;
}

ここは特に気にしなくておk。



*{
margin:0;
padding:0;
line-height:1.33em;
}


これ。

「行間は全部1.33em!」って指定。




a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}


body {
background-color:white;
font-family:"Osaka","MS Pゴシック",Arial,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}

.all{
width:580px;
}
.left{
padding: 0px;
margin:0 5px 5px 0;
width:285px;
border : 1px solid #9FB7D4;
float:left;
}
.left p , .right p {
margin-top:11px
padding-bottom:10px;
width:100%;
}

.right{
margin:0 0 5px 0;
width:285px;
border : 1px solid #9FB7D4;
float:right;
}
.headline , .footer{
width:600px;
clear:both;
}
.footer {
}
.clear br {
clear:both;
}



その他の設定はこんな感じです。






この設定を踏まえて、次は

「ドリコムRSSを横に複数列表示させる方法」

を書きたいと思います。
ほら、うちのブログは今4つのブログリストを貼り付けてるじゃないですか。
こんな感じで表示させる方法を記述します。もう眠いからブログ更新する力はないお・・





##################


ほぼ徹夜で下記のコンテンツ修正してました。
GALLAP
競馬のラップタイムに特化したデータベースです。

これのPCサイトも作ってるんですけど挫折しそう。
ああ、今寝ると起きるのは夕方なんだろうな・・。競馬出来ないや・・・。(;ω;`)


みんなおやすみー!