スタイルシート（CSS）を使ってインラインフレームを作成！

インラインフレームに納めたのはBlogPeopleやMyblog Japanなどのお気に入りリンク更新サービスである、「リンクリスト」、「MyblogList」です。

※勿論それ以外のものでも納められます。

で、こちらのサービスは各ブラウザにjavascriptを出力するタイプのものなので、通常のインラインフレームにするのが厄介です。できるかもしれないけど、スタイルシートで簡単にできるので以下のように設定しました。

まず両サイト指定のコードを以下のように<div>で囲んで、クラス名を新たに追加します。

<div class="適当な名前">
<script language="javascript">指定されたコード</script>
</div>

スタイルシートの設定例は以下の通りです。

.適当な名前{
width:198px;
height:60px;
overflow:auto;
border: 1px solid #CCCCCC; /* widthに加算される！ */
padding: 5px; /* widthに加算される！ */
margin: 5px 0px 0px;
}

厳密にはインラインフレームとは違うんですが、「 overflow:auto; 」を使うことで出来上がりは同じようになります。気をつけたいのは、borderとpadding属性です。これらの属性のサイズ指定はブラウザによってはwidth属性に加算されるので、予めそれを見越してwidthを設定しておく必要があります。

ちなみにスクロールバーの色を変える場合は、以下の設定を追加します。（Firefoxではスクロールバーの色は変わりません！）

scrollbar-face-color:#F6F6F6;

関連記事
└ スタイルシート（CSS）インラインフレームでBlogPeopleとMyblogListをスクロール！