2004年05月02日
livedoorブログのCSSカスタマイズ備忘録（スクロールバー）
昨日、コンサル会社のペーペー氏よりありがたいやらこそばゆいやらの、トラバをいただき、そういうことなら自分のブログの整理も兼ねてスタイルシート（CSS）の一部だけでも整理しようと、まずは件のスクロールバーのCSSとフリーメモのHTMLを以下に記載します。
■MyClipのスクロールバー
- １．MyClipのコードをコピペ
- こちらはまず、MyClipで 「JavaScriptを使用したClipリスト」のコードをコピーします。
そしてlivedoorならプラグインの追加＞メモスペースの追加ボタンをクリックし作成し、本文のところにペーストします。（改行タグは変換しないを選択） - ２．CSSの設定
- CSSに以下の部分をコピペする。(先頭のピリオドも含めて。ただし、ブラウザによっては引用符が表示される場合がありますが、引用符""はコピーしません)
.myclip-main{
overflow:auto;
height:250px;
color:#f05;
}
livedoorなら、テーマの設定＞customをクリックし、最終行に張り付ける。 - ３．Blogの再構築
- Blogの再構築（CSS）をしたら終了！←うまくいってないようだったら、全ページの再構築もやってみる。
■MyblogListのスクロールバー
- １．MyblogListコピペ
- MyblogListのコード生成で、「JavaScriptを使用したリスト」の部分をコピーする。
同じく、メモスペースを新規に作り、まずは以下のように記述する。
<div class="side-bar">
</div>
その後、先ほどコピーしたものをペーストすると、こんな感じになります。オレンジ色の部分が、MyblogListからのコピペです。
<div class="side-bar">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=******************" charset="EUC-JP"></script>
</div>
codeの部分は、ユーザー毎に違うので、****で表示しています。 - ２．CSSの設定
- CSSに以下の部分をコピペする。(先頭のピリオドも含めて。ただし、ブラウザによっては引用符が表示される場合がありますが、引用符""はコピーしません)
.side-bar{
overflow:auto;
height:250px;
color:#ef8b02;
} - ３．Blogの再構築
- MyClipのスクロールバーの場合と同じ。
■BlogPeopleのスクロールバー
- 「小春日和の陽射しの中で」さんの"サイドバーBlogPeopleのスクロール"を参照。
っていうか、前の二つもこれの準用（いわゆるパクリｗ）です。
コソっと、パンパでガウチョさんからもパクってますｗ 私のところを参考にするより、このお二方を参考にされる方が数十倍効率的です！（数百倍？ｗ）
と、いうわけで、オッさんでも手軽に出きるくらいCSSの敷居は一応は、、、高くないです。ブラウザごとに解釈が違うのがクセ者ですが、ここであげた範囲では（たぶん）問題がないです。
↑ハマリこむとプロの方々も苦戦しているようですが、ほどほどのレベルならCSSはけっこう便利ですよ。
【追 記】
●Birthday Blogにもスクロールバー
ものぐさなオッさんですが、ぐだくさん徒然さんの、、
＜スクロールバー…など。＞のエントリで
出来なかったこと。
・開閉ボタンを小さくして右側に移動したかった。
・『BlogPeople BB』にもスクロールバーを付けたかった。
とあったので、"Birthday Blogのスクロールバー"も お節介ながら追加しました☆
- １．Birthday Blogのコードをコピペ
- BlogPeople（ブログピープル）にログインして、設定＞15.『BlogPeople BB(Birthday Blog)』への参加で JavaScriptのコードをコピーします。
そしてlivedoorならプラグインの追加＞メモスペースの追加ボタンをクリックし作成し、本文のところにペーストします。（改行タグは変換しないを選択） - ２．CSSの設定
- CSSに以下の部分をコピペする。(先頭のピリオドも含めて。ただし、ブラウザによっては引用符が表示される場合がありますが、引用符""はコピーしません)
.blogpeople-bb {
overflow: auto;
height: 120px;
color: #f05;
} - ３．Blogの再構築
- MyClipのスクロールバーの場合と同じ。
*スクロールバーだらけのブログになってしまいますが、一応 縦に長くなりすぎることは、これで防止できます♪
Technorati Tags: livedoor, CSS, スクロールバー
人気ブログランキング
父さん
posted at 20:12
![[livedoorブログのCSSカスタマイズ備忘録（スクロールバー）]のネタをはてなブックマークに](http://livedoor.blogimg.jp/submit_yellow/imgs/f/f/ff5aa1ff.gif){kind=small}
