人気ブログランキング |


2007年 01月 16日 ( 1 )

⑦サイドバーのスクロールバー

このスキンのHTML部のサイドバー部分をクリックして出て来るメニューは

<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS=MNBODY><$mnbody$></DIV>


↑の <$mnbody$> とは
サイドバーの メニューの本文が表示されるタグ ここを変えて

<div class="mbody"><$mnbody$></div>をつけ加える つまり

<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS="MNBODY"><$mnbody$></DIV>

次にCSS編集で、
DIV.MN {
MARGIN-TOP : 20PX;
PADDING : 10PX;
}

の下に

DIV.MBODY{
WIDTH:170PX;
HEIGHT:180PX;
OVERFLOW:AUTO;
OVERFLOW-X:HIDDEN;
OVERFLOW-Y:AUTO;
TEXT-ALIGN:LEFT;
PADDING:0PX;
MARGIN:0PX;}

を入れます。その中身の意味は

div.mbody{
width:170px;    ←メモ帳の幅
height:180px;   ←メモ帳の高さ
overflow:auto; ←自動的にスクロールをつける設定
overflow-x:hidden; ←横方向スクロールなし
overflow-y:auto;  ←縦方向スクロールが自動的につく
text-align:left;
padding:0px;
margin:0px;}

この辺りのソースは  crossmoon2さん の記事を引用させて頂いています。


スクロールバーを付ける為には、まずボックスの高さ指定をします。中の文章が、指定した高さ以上になるとスクロールバーが出現するわけです。
そして、はみ出た部分の表示の仕方を指定するoverflowプロパティを使用します。


行きつ戻りつした点

その1) ④の高さを180、幅を170にしたのは試行錯誤の結果です。スクロールバーは各メニューの見栄えの高さがこの数値より高くなくてはスクロールバーは表示されない。つまり 私のブログカテゴリの高さが低いのでここを基準にする必要があった。(ここにはスクロールバーは付けなくてもいいってことなんだよね(笑)

コメントや過去記事の表示件数も少し増やして高さを出しました。


・・・逆に高さを260にしたら、各カテゴリー別にはならず長いものが2個になったりしました、よ(驚)・・・


その2)サイドバーのメニューの並びの中で、メモ帳、ネームカード、タグクラウド、の順にこの3種類を メニューの一番下に並べたところ、ようやく全てのメニューが表示されました。

最初、ネームカードとタグクラウドはカレンダーの下に、そして、メモ帳を各メニューの一番下に 分けてあったのですが、そのまま④を行うとネムカとタグが表示されなかったのです。つまり、ネムカ とタグクラウドはメモ帳で作られているということ???


その3)昨晩は教えていただいたサイトの他に、掲示板、エキブロTips などを検索し、違うタグを試してみたり入れる場所が違うのか?と悩んだり、行きつ戻りつ。

確か、メモ帳のタグの中に小分けにされた各メニューの小窓がある物もできたっけ(遠い目)今思うに先述のその1)、その2)に書いたことが原因だったと、今のところ思っています。

いずれにしても、今晩取り合えず出来たから、暫くこのままにして眺めることにします。くふふ。


参照先及びレスを戴いたのは as-o2さん、ありがとうございました!!


この投稿画面で見えているソースはそのままCSSやHTML部の編集画面にコピペ出来ます。

またこのブログに記事をアップする為に

< を <  に、そして  > を  > に置換したものを記事投稿画面にコピペ。

その他、関係ないかもしれないけれど、参照したソースが小文字で書いてあったので、それも私のスキン編集画面の表示にそろえて大文字に置換してからコピペしました。今回はテキストエディタを使用したので、とても見やすい画面でソースを触れたような。(照


では、お休みなさい。
by t2mina | 2007-01-16 22:56 | TB・ブログ