ライブドア相互RSSの2列・3列表示方法

いつも応援ありがとうございます⇒
 
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

まとめブログは圧倒的なアクセス数を確保する手段の1つとして、

まとめブログ同士やアンテナサイトとの相互RSSをしています。

 

相互RSSを結んでブログパーツを設置すると、

相互RSSを結んだ相手先ブログの最新記事タイトルなどを

自分のブログ上で表示させることができ、

クリックすれば相手先の該当記事ページを見ることができます。

 

もちろん、相手先ブログにも自分のまとめブログ記事が表示されるため、

相手先ブログからのアクセスも見込めるわけです。

 

まとめブログのほとんどは、

相互RSSのパーツをヘッダー or 記事の終わりに設置していますが、

本文中に設置しているブログもあります。

 

2列RSS

 

rss 2retu

 

 

 

3列RSS

 

rss 3retu

 

 

今日の内容は上の画像のようにスクロールタイプのRSS設置方法になります。

 

 

livedoor相互RSSをカスタマイズ

まずは、ライブドア相互RSSにログインします。

ライブドアアカウントをお持ちでない方はアカウントを作成してください。

 

livedoor rss

livedoor相互RSS

 

 

チャンネル作成とフィード設定

始めに「新規チャンネル作成」からチャンネルを作ります。

チャンネルとは、縦1列のまとまりのことで、

2列RSSなら2つ、3列RSSなら3つのチャンネルが必要です。

 

rss チャンネル

 

 

サイト名+番号等にして、

作ったチャンネルがどこに設置されているか判断しやすいようにしましょう。

 

livedoor rss チャンネル

 

 

チャンネル作成後、フィードの設定をします。

登録したいサイトのURLを順次入力してください。

 

liveddor rss feed

 

 

 

 

1つ目のチャンネル作成とフィード設定が終わったら、

同様の手順で2つ目、3つ目のチャンネル作成とフィード設定を済ませます。

 

ここまで出来たら、あとはHTMLコードの編集です。

 

 

2列RSSテンプレート

RSSを2列(2分割)で設置したい場合はCSSに下記コードを追記します。

 

自分のブログのCSS編集画面を開いて、一番最後の行にでも書き加えましょう。

 

.blogroll_wrapper {

width: 100%;

overflow-y:scroll;

background-color: #F7F7F7;

}

.blogroll_innner {

width: 49%;

height: 300px;

float: left;

}

 

 

次に、RSSを設置したい部分のHTML編集画面を開き、下記コードを記載します。

 

<div class=”blogroll_wrapper”>

    <div class=”blogroll_innner”>

<!–以下にチャンネル1の貼付けコードを貼り付ける–>

<!–以上にチャンネル1の貼付けコードを貼り付ける–>

    </div>

    <div class=”blogroll_innner”>

<!–以下にチャンネル2の貼付けコードを貼り付ける–>

<!–以上にチャンネル2の貼付けコードを貼り付ける–>

    </div>

</div>

 

 

記載後、ライブドアの相互RSS管理画面に戻り、

各チャンネルの「貼付けコード」欄から貼付けコードをコピーします。

 

この時、最後の1行分はコピーしなくて結構です

 

rss code

 

 

コピーした貼り付けコードを先ほどのHTML欄に貼り付けて保存します。

 

 

最終的にこんなカンジになると思います。

↓  ↓  ↓  ↓  ↓

 

<div class=”blogroll_wrapper”>

    <div class=”blogroll_innner”>

<!–以下にチャンネル1の貼付けコードを貼り付ける–>

<script type=”text/javascript”>
<!–
var blogroll_channel_id = 179561;
// –>
</script>

<!–以上にチャンネル1の貼付けコードを貼り付ける–>

    </div>

    <div class=”blogroll_innner”>

<!–以下にチャンネル2の貼付けコードを貼り付ける–>

<script type=”text/javascript”>
<!–
var blogroll_channel_id = 179560;
// –>
</script>

<!–以上にチャンネル2の貼付けコードを貼り付ける–>

    </div>

</div>

 

これで2列RSS表示の完成です。

 

 

3列RSSテンプレート

続いて、RSSを3列(3分割)で表示したい場合です。

3列の場合、CSSに下記コードを追記します。

 

.blogroll-channel,

.blogroll-channel * {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;
}
.blogroll-channel {
height: 200px;
margin-bottom: 15px;
padding: 10px;
border: solid 1px #999;
background: #fff;
overflow-y: scroll;
}

.blogroll-channel .blogroll-list-wrap {
margin-bottom: 10px;
}

.blogroll-channel .blogroll-list {
list-style-type: none;
margin-bottom: 3px;
font-size: 12px;
line-height: 1.3;
}

.blogroll-channel .blogroll-list img {
vertical-align: middle;
}

.blogroll-channel img.blogroll-icon,
.blogroll-channel img.blogroll-favicon {
margin: 0 5px 0 0;
}

.blogroll-channel img.blogroll-favicon {
width: 16px;
height: 16px;
}

.blogroll-channel a.blogroll-link {
}

.blogroll-channel .blogroll-new-entry {
margin-left: 5px;
color: red;
}

.blogroll-channel .blogroll-clip,
.blogroll-channel .blogroll-hatebu {
margin: 0 0 0 5px;
}

.blogroll-channel .blogroll-link-time {
margin: 0 0 0 3px;
color: #666;
font-size: 10px;
}

.blogroll-channel .blogroll-ad-img {
}

.blogroll-channel .blogroll-ad-text {
display: block;
margin-top: 5px;
color: #666;
font-size: 12px;
}

.blogroll-channel{
border: solid 1px #999 !important;
height:200px !important;
overflow-y: scroll;
}

 

正直なところ長すぎるので不要な部分がありそうですが、

なぜか上手くいくので、いつも3列RSS用CSSにはこれを使っています。

 

 

HTMLはコチラを使って下さい。

1行目の<table width=”1120″>はRSSパーツの幅を指定しているので、

ご自分のブログサイズに合わせましょう。

 

チャンネルコードは2列RSSと同様の方法で貼り付けます。

 

<table width=”1120″>

<tbody><tr valign=”top”>

<td width=”33%”>
<font size=”2″>

<!–以下にチャンネル1の貼付けコードを貼り付ける–>

<!–以上にチャンネル1の貼付けコードを貼り付ける–>

</font>
</td>

<td width=”33%”>
<font size=”2″>

<!–以下にチャンネル2の貼付けコードを貼り付ける–>

<!–以上にチャンネル2の貼付けコードを貼り付ける–>

</font>
</td>

<td width=”33%”>
<font size=”2″>

<!–以下にチャンネル3の貼付けコードを貼り付ける–>

<!–以上にチャンネル3の貼付けコードを貼り付ける–>

</font>
</td>

</tr>
</tbody></table>

 

以上、長くなりましたがライブドア相互RSSの2列・3列設定方法でした。

 

 

ライブドアRSSはHTML編集があるので取っ付きにくいかもしれませんが、

慣れれば簡単ですし便利なブログパーツです。

 

まとめブログのアクセスアップには必須のツールですので、

お時間があるときに挑戦してみてください。

 

また、他の相互RSSツールも是非、試してみて下さいね。

 

 

ちなみに、

まとめブログのことをもっとよく知りたい!

まとめブログでお金を稼ぎたい!

という方は、こちらのメルマガに登録することをおすすめします。

↓  ↓  ↓

90日で給料以外に10万円稼げるようになるメルマガ

おそらく、まとめブログで日本一稼いでいる方のメルマガです。

↓の記事も読むと収入アップにつながります


コメントを残す

サブコンテンツ

このページの先頭へ