EKKEN♂

このブログは http://ekken.blog1.fc2.com/ に移転しました

スクロールバーを設置したい

2002-06-20 | goo BLOG
 ブログのデザインについて質問が寄せられたので、回答を。
確かに私も「iframe」のタグを使おうとすると、自動的に書き換えられてしまうのは体験済みなのですが、ではこの「むだづかいにっき♂」の右側『PICK UP』の部分など、iframeを使っているように見えるのですが、えっけんさんはどのようなワザを使っていらっしゃるのでしょうか?

むだづかいにっき♂:Amazonアソシエイト リンク作成ツールコメント欄より

 や、特別難しい事はしていないです。PICK UPの部分の正体は、gooブログのデフォルトで装備されている「ブックマーク」です。アドバンスのHTMLカスタマイズで、「ブックマーク」を「PICKUP」と言う名前に変えているだけです。
 以前は、HTMLを使ってブックマークとは別個に表示させていましたが、巡回先の外部リンクを表示させる事に意味を感じなくなったので、自薦記事を入れ替えやすいブックマークモジュールを使うことにしました。
 スクロールバーが表示されているためにiframeタグを使用していると思ったのかもしれませんが、CSSをいじっているだけです。
 参考までに該当部分のソースを。
HTMLに書き足し
<!-- PICKUP -->
<div class="menuBar">PICK UP</div>
<div class="menupu">
{$bookmark} 
CSSに書き足し
/* PICKUP用 */
.menupu {
background-color: #000000;
color: #C0C0C0;
padding: 5px 10px 10px 10px;
width: 250px;
background-repeat: repeat-y;
background-position: left,top;
overflow : auto ;
height : 200px;
scrollbar-3dlight-color : #000000;
scrollbar-arrow-color : #000000;
scrollbar-base-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-face-color : #2F2F2F;
scrollbar-highlight-color : #5F5F5F;
scrollbar-shadow-color : #7F7F7F;}

 ブックマークモジュール:$bookmark}にmenupuというスタイルを設定し、この部分にCSSで表示方法を設定しています。見た目の問題でスクロールバーに装飾を施していますが、これはIEでないと反映されないので、「scrollbar」の部分は消してしまって構いません。
 この部分の他、下部のRSSを表示させている部分も同様に別のスタイルを設定しています。