ヘッドライン
livedoor BlogRoll(ブログロール)をご存知でしょうか?
livedoor BlogRollとは好きなブログの更新情報を見出しを表示するブログツールです。
ドリコムRSSが2011年9月に終了が決定した為、
今後livedoor BlogRollを利用するブログ管理者が多いと思います。
しかしながらlivedoor BlogRollでは
デフォルトで特殊なスクロールバー、特殊な枠があるため
カスタマイズする人には非常に苦戦すると思います。(私もその一人でした)
今回はを管理人独自なカスタマイズも加えて紹介していきます。
BlogRollにまずアクセスしましょう!
※使用する場合、livedoorIDが必要です

まずは他所のRSSサービスと違うという点を紹介します。

1.動作が快適
2011年6月現在は快適です。
ですが、昔のドリコムRSSやあやぽんRSSでも言えた事ですが、
使う人が増えていくとサーバーの負担が増えるので
これからはどうなるかはわからないですね。

2.表示スタイルが自由自在
これは初心者には楽な設定です。
ですが、かなり細かい設定をする場合はちょっとクセがあります。

3.誘導したクリック数がわかる
これはかなり便利です。他所では無かったちょっとした
アクセス解析機能。
アクセス数が多ければ多いブログほどこの点はかなりおいしいと思います。

4.1つのIDで複数のチャンネル
何個でも作れるのは良いですね。

BlogRollの登録方法は簡単に紹介させて頂きます。
1.『新規チャンネル作成』で好きな名前を入力
2.チャンネルメニューの『フィードの追加』で登録したいサイトのURLを入力
3.『登録』にチェックを入れて『追加』をクリック。
4.2⇔3を繰り返し、好きなサイトを次々に入力。


なおそのままの設定だと調整できない箇所が多いんです。
人によってはスクロールバーが邪魔になってしまったり、
スクロールバーを自分好みにカスタマイズしたいと思ったり、
または枠を非表示にしたいと思っても・・・

ソースコードを見てもどこを変えればいいのか
正直検討もつかないでしょう・・・私も四苦八苦しました(汗)
この影響で一度はBlogRollを諦めて他のサービスを利用しようかと思いました。

・・・と思ったら、livedoorの公式で非表示方法を紹介していました。
BlogRollの使い方:枠線とスクロールバーを非表示にしたい - livedoor ヘルプ
単純に非表示にしたい人にはこちら↑の方法のみ行うとOKです。




ここから管理人独自のカスタマイズ記事紹介。

livedoorブログにヘッドラインを追加させる方法
こちらの方法を使用すれば、
自分だけのオリジナルスクロールバーを作成できます。
さらにライブドアブログでのヘッドラインの設置場所などの詳しい説明をこちらで紹介済です。

ただし、そのまま行うとちょっと引っ掛かった点が1つありました・・・↓
livedoor ヘルプの方法のみのヘッドラインのスクリーンショット
1
左側と上側に妙な空白が出来てしまいます。
この余白を消す方法を紹介します。

1.livedoor ヘルプの方法と同じくまずはBlogrollのタグからcssの設定を削除します。
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default.css" />


2. その後、http://blogroll.livedoor.net/css/default.cssの管理人が編集したコードを入れ込みます。
ブログ設定をクリックします。
1


3. 「基本設定」の「デザイン」をクリック。
2


4. 「デザインカスタマイズ」をクリック。
3
※カスマイズ前に「保存」でバックアップをすることを強くお勧めします。


5.その後、CSSで以下のBlogrollのタグの設定を入れ込みます。
/* ----------------------------------------------- */
/*

BlogRoll css

*/
/* ----------------------------------------------- */

.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: 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;
}


上記のCSSをコピーしてくてください。
管理人が調整したのはmargin-bottom& paddingの部分のみです。
この部分の影響で妙な空白がありました。

●上記のCSSの設定後のヘッドラインのスクリーンショット
2
こうすれば一安心。


CSSのコピーを貼り付ける場所はどこでも大丈夫だと思います。
管理人は最後の方に↓ペタっと貼り付けました。正常に表示されたことを確認済み。
3



CSSの設定をリセットすれば自分好みのカスタマイズが出来ます。
ブロガーのみなさん、ぜひとも livedoor BlogRollへ!