web製作

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」はあくまでも、この位置のみのなので、他の

ABOUT ME
moja
昭和47年生まれ。生まれた時からカープファン。 姫路生まれ姫路育ち。現在は相生市矢野町榊。 パソコン販売・修理・組立、出張サポート、ホームページ制作・WEBデザインなど。 奥さん1人と4男の父 真宗門徒
お問い合わせ

090-3990-0645

にほんブログ村 地域生活(街) 関西ブログ 姫路情報へにほんブログ村 子育てブログへにほんブログ村 野球ブログ 広島東洋カープへ