【まとめブログ】ライブドアブログで記事下にRSSを埋め込む方法

 

f:id:knrnntnp:20140331221058p:plain

 

 

まとめサイトを運営する上でアンテナサイトにアクセスを送りアクセストレードをするのは必要不可欠です。
多くの大手まとめサイトですらしているのだから、零細もいうまでもありません。

ライブドアには 有料コースでまとめサイト用のテンプレートがあるのですが、 RSSを表示するところがヘッダー部分のみです。
多くの読者は記事を読み終わってからリンクを踏んでくれるはずなので、記事下へのRSSを設置しないのはもったいないはずです。
運営するまとめサイトに質問がきたため今回は記事下RSSの設置の仕方を紹介しようかと思います。

※管理人はまとめサイトを運営し始めて3週間程度のニートでhtmlもcssの知識もほぼ皆無なので、一番良い方法かどうかは分かりません。

他のサイト様のソースを見たりググったりして、なんとなくできたものだということを留意して頂きたいです。

そのため、ライブドアブログで「とりあえず記事下にRSSを埋め込みたい」という人が参考にしてくださいw

 

①以下のhtmlソースをコピー

 

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>RSS</title>

<style TYPE="text/css">

 

body {height:100%;

margin: 0;

padding: 0;

 

font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;

}

 

a{color:#3d3a3a !important; text-decoration:none;}

a:active{color:#3d3a3a !important; text-decoration:none;}

a:visited{ color:#3d3a3a !important; text-decoration:none;}

a:hover{ text-decoration:none; color:#3d3a3a !important; background: #d6fff8; }

 

.blogroll-channel,

.blogroll-channel * {

width: auto;

height: auto;

margin: 0;

padding: 0;

border: none;

text-align: left;

}

.blogroll-channel {

margin-bottom: 0px;

padding: 0px;

background: #fff;

}

 

.blogroll-channel .blogroll-list-wrap {

margin-bottom: 10px;

}

 

.blogroll-channel .blogroll-list {

list-style-type: none;

margin-bottom: 1px;

font-size: 16px;

line-height: 30px;

padding-left:23px;

border-bottom:1px dotted #CCCCCC;

margin-left: 5px;

margin-top: 2px !important;

display: block;

font-weight:bold;

}

 

.blogroll-channel .blogroll-ad-text {

color: #666;

font-size: 15px;

}

 

.baa{

padding:0px;

text align:left !important;

width:728px;

}

 

.baa a{

padding-left: 26px;

margin: 0px 0;

display: block;

}

.rss_footer a:hover{

color: #F90;

}

 

.baaa{

padding:0px;

margin:10px 0px 15px 5px;

text align:left !important;

}

 

</style>

 

</head>

<body>

<div class="baa">

 

<script type="text/javascript">

<!--

var blogroll_channel_id = 自分のライブドアrssのid

;

// -->

</script>

<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>

<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default2.css" />

 

</div>

 

<div class="baaa">

 

このページは「<a href=“自分のサイトのURL

" target="_blank">サイト名</a>」が管理しています。<br>

 

</div>

 

</body>

 

</html>

 

②コピーしたhtmlソースを編集

<!--

var blogroll_channel_id = 自分のライブドアrssのid

;

 

// -->

上の「自分のライブドアrssのid」という部分を削除し代わりにライブドアRSSの管理画面「貼り付けコード」より取得できる数字を記入。

f:id:knrnntnp:20140331224225p:plain

 

このページは「<a href=“自分のサイトのURL

 

" target="_blank">サイト名</a>」が管理しています。<br>

 この部分も自分のサイト用に編集しましょう。

拡張子を.htmlで保存

④このhtmlをブログにアップする。ライブドアブログの場合、「画像/ファイル」の「ファイル管理」という画面でできます。(他のブログサービスは知らん)

 

f:id:knrnntnp:20140331225034p:plain

 

⑤「ファイル名」のところにアップしたhtmlが表示されるので、そこをクリック
⑥そうすると次のようなページが見られるはずなのでURLをコピーしましょう。

f:id:knrnntnp:20140331225449p:plain

 

⑦次のhtmlコードの「ブログロールのURL」という部分を削除しそこに⑥でコピーしたURLをペースト

<!-- ブログロール -->

<h3><font color=ff0000>こちらもおすすめ!</font></h3>

<iframe width="655" scrolling="no" height="370" frameborder="0" src="ブログロールのURL"></iframe>

 

<!-- /ブログロール-->

ライブドアブログ管理画面より「ブログ設定」▶︎「デザイン/ブログ設定」▶︎「PC」▶︎「カスタマイズ」▶︎「個別記事ページ」とすすみ⑦のhtmlを適当な所へ貼付ける。

f:id:knrnntnp:20140331230418p:plain

(ブログのテンプレートによって異なるため、貼ってみてプレビューで確認して微調整して下さい)

記事下RSSを表示する大きさは⑦のhtmlのwidth=""で幅、height=""で高さを調整できます。

 

以上で多分設置ができるはずなのでお試し下さい。

管理人TNP