ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

相互RSSを2列に並べて表示

カスタマイズ』カテゴリの関連記事

スポンサードリンク


少し前からブログに表示させるようにしてた相互RSS。2ちゃんねるのまとめサイト等でよく見かけるものですが、以前は知識のなさから、これが1列しか表示させることしか出来なかったが、なんとか2列に並べて表示させることが出来ました。

なんとか表示出来たはいいが、実はこれライブドアの公式の設定ではないです。何度試しても設定がうまく行かなかった。なので色々組み合わせて形だけでもうまく表示させることに。

テンプレートのHTMLの相互RSSを表示したい場所に下記を。

<!-- ▼ 相互RSSコードここから ▼ -->
<div style="width:727px;height:270px;overflow:auto;background-color:#FFFFFF;scrollbar-arrow-color:#000;scrollbar-base-color:#ccc;border-top-style:groove;border-left-style:outset;border-bottom-style:groove">
<div class="blogroll-wrapper">
<div class="blogroll-column">
<script type="text/javascript">
<!--
    var blogroll_channel_id = ■■■■■;
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
</div>
<div class="blogroll-column">
<script type="text/javascript">
<!--
    var blogroll_channel_id = ■■■■■;
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
</div>
<!-- /.blogroll-wrapper --></div>
</div>
<!-- ▲ 相互RSSコードここまで ▲ -->


CSSには下記を。

/* ▼ 相互RSS ▼ */
.blogroll-wrapper{
width: 100%; 
overflow:hidden;
}
.blogroll-column{
float:left;
width:50%;
}


縦横のサイズはwidthheightの数値変える。■■■■■の箇所には相互RSSのタグのidナンバーを。

ブログ 20130831

これで取り敢えず画像の様に形だけは並べて表示させることが出来ました。

 カスタマイズ

 FC2 カスタマイズ ブログ 相互RSS

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック