livedoor 相互RSSにスクロールバーを付ける方法

公開日：2013/11/16

更新日：2013/11/16

カテゴリー: HTML・CSS

livedoorが提供しているツール相互RSSにスクロールバーを付ける方法を説明します。

とても簡単に実装できるイレギュラーな方法とスタンダートな方法があります。

１．読み込むCSSを「default2.css」から「default.css」に切り替える

まずはイレギュラーな方法です。この方法は、livedoorが提供してくれるコードのCSS指定を「default2.css」から「default.css」にするだけです。

HTMLやCSSがちんぷんかんぷんな方でも簡単にスクロールバーがつきます。

livedoor 相互RSS管理画面→貼り付けコードにいくと、次のコードがあります。

<script type="text/javascript">

</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" />

この「default2.css」部分を「default.css」にするだけです。

ただ、「※このソースコードは、編集しないでそのまま貼りつけてください。」という注意書きがありますので、自己責任でお願いします！（まぁ違反的意味ではなく、初心者の方がいじって表示されなくなるのを防ぐ意味だと思います）

「default2.css」と「default.css」の違いは？

これらのCSSシートの違いをざっと見た感じ、「blogroll-channel」クラスのみが違いました。

【default2.cssの場合】

.blogroll-channel {
    margin-bottom: 15px;
    padding: 10px;
}

【default.cssの場合】

.blogroll-channel {
    height: 200px;
    margin-bottom: 15px;
    padding: 10px;
    border: solid 1px #999;
    background: #fff;
    overflow-y: scroll;
}

２．自分のCSSを編集

スクロールバーは、CSSで実装できますので、自分のサイトのCSSに以下のコードを追加すればOKです。

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

なお、「200」の部分を任意の値にすれば、高さの調節が可能です。

３．どんなコードが出力されるの？

ここからはオリジナルにカスタマイズするための必要最低限の情報を記載します。

さて、livedoor 相互RSSはjavascriptでHTMLコードを出力しています。

このコードさえわかれば、あとは自由自在にカスタマイズができます。以下が簡略化したHTMLコードです。

<div id="blogroll-○○○" class="blogroll-channel">
    <ul class="blogroll-list-wrap">
        <li class="blogroll-list">
            <img src="http://○○○.com" class="blogroll-icon"><a target="_blank" href="http://○○○.com" class="blogroll-link">○○○</a><span class="blogroll-link-time"></span>
        </li>
    </ul>
    <div style="display: block !important;" class="blogroll-ad-img">
        <a title="ライブドアの広告" target="_blank" href="http://○○○.com"><img style="display: inline !important;" alt="" src="http://○○○.com"></a>
    </div>
    <div style="display: block !important;" class="blogroll-ad-default">
        <a target="_blank" href="http://blogroll.livedoor.com/">Powered by livedoor 相互RSS</a>
    </div>
</div>

これを参考にすれば、自分流にカスタマイズができるのではないかと思います。

※「<img alt="" src="http://○○○.com" />」はアイコンを使用している場合に出力されます。

あわせて読んでほしい！

Follow @ysklog_net 　