「お知らせ」の表示を一部にする　

私のブログでは「小粋空間」さんで紹介している

「中央カラムに「ニュース」「お知らせ」を表示する」

を使わせていただいています。

 しかし、これだけのカスタマイズですと「お知らせ」が増える度に

メインである最新エントリーが画面の下に追いやられていきました...。

ちょっと悲しい（笑）ので、できるだけ「お知らせ」は残したままにしてエントリーがすぐに見えるようにするため、以下の方法をとりました。

ただ、私は自分のＰＣで、しかもＷｉｎＸＰ、ＩＥ７の環境でしか見ていませんので、その他のＯＳやブラウザでの表示はわかりかねます。その辺りはご了承下さいm(__)m

カスタマイズはただＣＳＳに追記するだけの簡単なものです。

タグを書き出して説明をつけてます。

.news-header {
    margin: 5px 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
}

.news-content {
    margin-top: 5px;
　  height:75px;
　  overflow-y:scroll;
}

「小粋空間」さんで説明されているＣＳＳは黒字、私が追記した分が赤字です。

５行ほど表示させたかったので設定を文字サイズ（１２ｐｘ）×５＋αと考え、表示全体の高さを「７５ｐｘ」である

height:75px;

を追記。

また、その高さを維持し、さらに全体の履歴を残しておきたいので

overflow-y:scroll;

を追記することによって「お知らせ」の縦スクロールバーをつけました。

この時、「overflow-y:scroll;」の「-y」を外すと横スクロールバーも付きます。

ただし、スクロールバーが付くので表示高を変更しないと、４行半ぐらいしか見えなくなります。

横スクロールバーだけを付けたいときは「-y」を「-x」に変更すればOKです。

初めて自分だけでカスタマイズしてみたので、どうかわかりませんが参考になればと思います。