2009.04.27 11:37:39
様々なRSSがあふれていますが、Google Readerを使うと、整理して素早く必要なものだけ読めるので、愛用しています。
また様々なRSSをブログに表示したり、mixiに複数のブログを表示させるのにも使えます。
とくに、はてなブックマークは、公式にカスタマイズできるブログパーツが提供されておらず？、どうしても自分のサイトになじんだデザインで貼りたかったので、Google Readerを経由させて表示する方法をとってみました。
また様々なRSSをブログに表示したり、mixiに複数のブログを表示させるのにも使えます。
とくに、はてなブックマークは、公式にカスタマイズできるブログパーツが提供されておらず？、どうしても自分のサイトになじんだデザインで貼りたかったので、Google Readerを経由させて表示する方法をとってみました。
mixiに複数のブログを表示
弐. などからmixiと言う名前の新しいフォルダを作る。
そこへまとめたいブログのRSSを振り分ける。
そこへまとめたいブログのRSSを振り分ける。
参. フォルダを公開する設定にして、まとめられたRSSを取得する。
で公開する設定にする。
ところのアドレスが、まとめられたRSSのアドレスになる。
で公開する設定にする。
ところのアドレスが、まとめられたRSSのアドレスになる。
肆. mixiの設定を開いて、まとめられたRSSのアドレスを入力する。
のところには、メインのブログを入れておいて、「RSSのURL」にまとめられたRSSのアドレスを入れておける。
のところには、メインのブログを入れておいて、「RSSのURL」にまとめられたRSSのアドレスを入れておける。
これで、mixiのホームに複数のブログ等の更新状況が表示される。
私の場合は、このブログと、絵を載せてる自分のギャラリーのふたつ。
このやり方はFacebookなどにも応用できる。
いろんなサービスがあるけど、普段使ってるRSSリーダーでサクッとできるのが、手軽でいいと思う。
私の場合は、このブログと、絵を載せてる自分のギャラリーのふたつ。
このやり方はFacebookなどにも応用できる。
いろんなサービスがあるけど、普段使ってるRSSリーダーでサクッとできるのが、手軽でいいと思う。
はてなブックマークをカスタマイズして、ブログに貼付ける。
壱. はてなブックマークのRSSを上記のように、Google Readerに読み込ませ、独立したフォルダをつくる。
はてなブックマークのRSSは、ページの左下のすみっこにリンクがある。
Safariなどのブラウザでは、アドレス表示エリアにRSSのリンクが出る。
はてなブックマークのRSSは、ページの左下のすみっこにリンクがある。
Safariなどのブラウザでは、アドレス表示エリアにRSSのリンクが出る。
弐. で公開する設定にし、
をクリックしてコードを取得する。
配色はにしておく。
をクリックしてコードを取得する。
配色はにしておく。
肆. CSSでコードの見た目を加工して、ブログ等にはりつける。
コードを<div class="goor">でかこむ。リストで出力されるので、こんな感じで<div class="goor">にスタイルを設定すると、色や罫線等をカスタマイズできる。
このコードでの表示サンプルは、このページの右上にあります。
background-color:#fff;border:1px #b0c4de solid;}
.goor a:link{color:#2f2e6b;font:11px/140% 'Courier',monospace;}
.goor a:visited{color:#2f2e6b;font:11px/140% 'Courier',monospace;}
.goor a:hover{background:#afeeee;color:#2f2e6b;font:11px/140% 'Courier',monospace;}
.goor ul{margin:0px;padding:0px;list-style:none inside;}
.goor ul li{list-style:none inside;
margin-top:3px;padding-bottom:3px;padding-left:2px;
text-align:left;border-bottom:1px #ddd solid;}
.gfc{height:250px;}
コードを<div class="goor">でかこむ。
<div class="sideys">
<a href="http://b.hatena.ne.jp/YINGUO/" target="_blank">はてなブックマーク</a>
</div>
<script type="text/javascript" src="http://www.google.co.jp/reader/public/javascript/user/18359796192280203908/label/はてなブックマーク?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"></script>
<a href="http://b.hatena.ne.jp/YINGUO/" target="_blank">はてなブックマーク</a>
</div>
<div class="goor">
<script type="text/javascript" src="http://www.google.co.jp/reader/ui/publisher-ja.js"></script><script type="text/javascript" src="http://www.google.co.jp/reader/public/javascript/user/18359796192280203908/label/はてなブックマーク?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"></script>
</div>
このコードでの表示サンプルは、このページの右上にあります。
/*goor*/
.goor {padding:3px;color:#555;font:11px/140% 'Courier',monospace;background-color:#fff;border:1px #b0c4de solid;}
.goor a:link{color:#2f2e6b;font:11px/140% 'Courier',monospace;}
.goor a:visited{color:#2f2e6b;font:11px/140% 'Courier',monospace;}
.goor a:hover{background:#afeeee;color:#2f2e6b;font:11px/140% 'Courier',monospace;}
.goor ul{margin:0px;padding:0px;list-style:none inside;}
.goor ul li{list-style:none inside;
margin-top:3px;padding-bottom:3px;padding-left:2px;
text-align:left;border-bottom:1px #ddd solid;}
.gfc{height:250px;}
ちょっと工夫すれば、難しいことをしなくてもいろいろ便利になります。
もっと、いろいろ手軽に情報をまとめて出力できる方法があるはず。
これからも、ブログの見やすさの向上や、たくさんのRSSに短い時間で目を通せるように工夫していきたいと思います。
もっと、いろいろ手軽に情報をまとめて出力できる方法があるはず。
これからも、ブログの見やすさの向上や、たくさんのRSSに短い時間で目を通せるように工夫していきたいと思います。
