ライブドアブログのカスタマイズ-相互RSSの分割ヘッドラインの設置方法

【この記事を読むのに必要な時間は約 7 分です。】

ライブドアブログでlivedoor 相互RSSを利用したヘッドラインを設置しているブログを数多く見つけることができる。
私自身も二つのライブドアブログで2分割と4分割の相互RSSヘッドラインを設置している。
今回は、ヘッドラインを簡単に設置する方法を紹介する。なお、既に、livedoor相互RSSに登録して利用可能な状態であることを前提とする。

livedoor 相互RSSから貼り付けコードを取得

当然ながら、livedoor 相互RSSで、設置したい相互RSSのチャンネル毎の貼付けコードを事前に取得しておく必要がある。通常版とiframe版があるが、今回は、通常版を利用する。
ちなみに、livedoor 相互RSSの貼付けコード通常版はこんな感じ。

<script type="text/javascript">
<!--
    var blogroll_channel_id = 83659;
// -->
</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" /> //今回、この部分は削除して利用する

ヘッドラインの設置方法

今回は、2分割と4分割のヘッドラインの設置方法について説明する。

ヘッダー部分への記載-デフォルトCSSの呼び出し

デフォルトのlivedoor 相互RSSのCSSを呼び出す。<head>と</head>の間に以下のように記載すればよい。

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

ボディ部分への記載-ヘッドラインの設置

設置場所

ヘッドラインを設置する。<body>と</body>の間で設置したい場所に記載することとなる。
例えばトップページで、ヘッダー画像のすぐ下(メニューバーがある場合は、メニューバーのすぐ下)、全体の上部に設置したい場合は、以下の部分に記載する。
なお、テンプレートによって変わってくるので、確認すること。

<$IndexNavigator$>←これより下の部分

--------この部分に記載する------------

<!-- ArticlesLoop Start -->←これより上の部分

<$IndexNavigator$>より上に設置するケースもある。自分のテンプレートで設置場所は確認するように。

設置方法

2分割の設置は以下のように記載する。なお、4分割にしたい場合は、もうひとつ2分割を続けて記載すればよい。

<div class="blogroll_wrapper">
 	<div class="blogroll_innner">
<!--以下にチャンネル1の貼付けコードを貼り付ける-->

  (チャンネル1の貼付けコード)

<!--以上にチャンネル1の貼付けコードを貼り付ける-->
 	</div>
 	<div class="blogroll_innner">
<!--以下にチャンネル2の貼付けコードを貼り付ける-->

   (チャンネル2の貼付けコード)

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

チャンネルの貼付けコードも含めるとこんな感じで。

<div class="blogroll_wrapper">
 	<div class="blogroll_innner">
<!--以下にチャンネル1の貼付けコードを貼り付ける-->
<script type="text/javascript">
<!--
    var blogroll_channel_id = 84264;
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
<!--以上にチャンネル1の貼付けコードを貼り付ける-->
 	</div>
 	<div class="blogroll_innner">
<!--以下にチャンネル1の貼付けコードを貼り付ける-->
<script type="text/javascript">
<!--
    var blogroll_channel_id = 84265;
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
<!--以上にチャンネル1の貼付けコードを貼り付ける-->
 	</div>
</div>

上記貼り付けコードからは、既にヘッダー部分に記載した<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default2.css" /> は削除してある。

CSSでデザインのカスタマイズ

後は、自分のブログデザインにあわせて、CSSでカスタマイズする。
直接、ヘッダー部分(<head>と</head>の間)に記載しても良いし、CSSファイルに追記しても良い。
以下を参考にして記載、または追記すると良い。

<style type="text/css">  
.blogroll_wrapper { 
		width: 100%; //全体の枠は100%で指定
		background-color: #F7F7F7; //背景の色を指定
	} 

.blogroll_innner { 
		width: 49%; //2分割にしてボーダーを設定したので49%に指定
		height: 300px; //高さは適宜指定
		border: 1px solid #339900; //枠の太さと色の指定		
		border-collapse: separate; //枠の重なりを指定
		margin-right: 1px; //マージンを指定
		margin-bottom: 1px; //マージンを指定
		float: left; //このままで
		overflow-y:scroll; // スクロールバーの表示を指定
		scrollbar-base-color:#339900; //スクロールバーの色を指定
	}
</style>  

上記の例では、直接、ヘッダー部分(<head>と</head>の間)に記載したので、最初の部分に<style type=”text/css”>を最後の部分に </style>を付けているが、CSSファイルに追記する場合は必要ない。

これで出来上がり。2分割と4分割でこんな感じ。

WS000000
WS000001

実際に設置している例は、私のライブドアブログで確認して欲しい。
2ちゃんねる じゃんじゃん速報
48 Collector
以上

Related Posts Plugin for WordPress, Blogger...