RSSフィードのデザイン変更 | 厨でもわかるライブドアブログのいじりかた
前回はRSSフィードの設置方法を記述しました。
今回はそのRSSフィードのデザインの変更方法です。
2ちゃんねるブログには必須に近いコンテンツなので、
これから2ちゃんねるブログを作るかたでRSSフィードの設置方法などがわからない方は読んでもらえると、タメになるかも。
注:
この記事はドリコムRSSを使用していることを前提でお話しています。
詳しくはうちのブログのカテゴリのHTMLあたりを見とけって。
とりま、今回はYahoo風なRSSフィードを作ってみました。
2008/03/15現在のこのブログのRSSのデザインです。
では解説に入ります。
下記のファイルを「右クリック→対象をファイルに保管」を選んでください。
ドリコムRSSは下記のような構造になっています。
これさえ分かればあとはこっちのものだよね(´ω`)
これに対応したCSSを記述してあげればいいだけだもん。
前回作ったファイルに早速記述してみましょう!
え?どこにかって?
それは
もちろん外部にCSSファイルを用意して読み込ませても(・∀・)イイ!!
では説明します。
class="drecom"で囲われているソースは全て左詰ですよー。
背景色は白だおー!って説明。
class="drecomrss_blog_list_categoryで囲われているソース、タイトルに当たる部分の設定です。
注目すべきは・・display:blockかなあ。
背景色の注意点。
Yahooは画像を使ってグラデーションにしてます。
画像用意するのが面倒なDJ OTZMAはグラデーションの中間色あたりを選びました。
これは各ブログの記事のタイトル部分の装飾だね。
注目すべきはline-height。
Yahooは1.33em。だからこれも1.33em。
font-sizeもYahooと同じ12px。
特に説明いらないよね。
上記の通りにHTMLファイルに記述し、アップロードをしてみればわかると思います。
微妙に違うwww
うちのRSSにはさらに下記のような設定が施されています。
ここは特に気にしなくておk。
これ。
「行間は全部1.33em!」って指定。
その他の設定はこんな感じです。
この設定を踏まえて、次は
「ドリコムRSSを横に複数列表示させる方法」
を書きたいと思います。
ほら、うちのブログは今4つのブログリストを貼り付けてるじゃないですか。
こんな感じで表示させる方法を記述します。もう眠いからブログ更新する力はないお・・
##################
ほぼ徹夜で下記のコンテンツ修正してました。
GALLAP
競馬のラップタイムに特化したデータベースです。
これのPCサイトも作ってるんですけど挫折しそう。
ああ、今寝ると起きるのは夕方なんだろうな・・。競馬出来ないや・・・。(;ω;`)
みんなおやすみー!
前回は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サイトも作ってるんですけど挫折しそう。
ああ、今寝ると起きるのは夕方なんだろうな・・。競馬出来ないや・・・。(;ω;`)
みんなおやすみー!