BizVektorで新着一覧にスクロールバーを付けた。CSS「overflow: scroll;」

wordpressのテーマ、BizVektorのカスタマイズ

新着一覧にスクロールバーをつける。

BizVektorを使ってトップページに新着一覧を表示させたが、10件表示させると少し幅を取りすぎるので、スクロールバーを使って表示面積を減らし、新着は15件表示させるようにしてみた。

施工前

このままではすくし新着一覧が多すぎる。かといって5件に減らすと読まれない記事が出るので、スクロールバーを付けることにした。

表示箇所は、ウィジェットの「メイン画像直下（トップページ）の1番目。
CSSカスタマイズに以下のスタイルシートを記述

[css]
/* 新着一覧をスクロール */
#recent-posts-2 ul{
height: 15em; /* 枠の高さ */
overflow: scroll; /* スクロールバー */
border: solid 1px #000000; /* 枠線 */
background-color: #ffffff; /* 背景色 */
}
[/css]

初めに、「#recent-posts-2.widget.widget_recent_entries ul」としたが、クラスは不要だった。divのみで上手くいった。
実際にスクロールをつけるだけなら最初の2行だけでいける。

この状態で確認すると

左が少し開いているのと、新着の1行目が上につまり過ぎているの。そして新着のタイトルバーとスクロール枠の隙間が大き過ぎたので修正。

[css]
/* 新着一覧をスクロール */
#recent-posts-2 ul{
height: 15em; /* 枠の高さ */
overflow: scroll; /* スクロールバー */
border: solid 1px #000000; /* 枠線 */
background-color: #ffffff; /* 背景色 */
padding-top: 12px;　/* 1行目を下げた */
margin-left: 0px;　　/* 枠を左いっぱいに */
}

/*　新着h2ボトム */
#recent-posts-2 h2{margin-bottom: 15px　/* タイトルバーと枠の隙間 */ }
[/css]

タイトルバーと枠線の隙間は、タイトルバーのボトムであった。

完成。

実際の施工ページ　「https://denpakudo.jp/」

「#recent-posts-2」はあくまでも、この位置のみのなので、他の

お問い合わせ

090-3990-0645