棒線を加えて記事と記事を区別化

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

棒線を加えて記事と記事を区別化

記事と記事の間が背景色だけだと判りづらですよね！！！
そこで区別化するために棒線を入れてみた。

棒線の種類

solid　⇒　実線

double　⇒　二重線

dashed　⇒　点線

dotted　⇒　破線

他にも

groove・ridge・inset・outset　等があります。

好みの棒線を選択しておきます。

例えば、solid を入れる場合は

[css]
border-bottom: 1px solid #000;
/*線の大きさ　タイプ　色*/
[/css]

のように、線種・太さ・色等のスタイルを決めて置く。

どこに追加するかあらかじめ決めておく

例として

１．トップ画面

２．サイドバーのＮＥＷＥＮＴＲＹ

３．関連記事

４．新着記事 等があります。

１．トップ画面の記事と記事の間に入れる

[css]
.entry {
margin-bottom: 20px;
padding-top: 10px;
}
[/css]

.entryが該当するので、そこに

[css]
border-bottom: 1px solid #000;
[/css]

追加する。 変更後

[css]
.entry {
margin-bottom: 20px;
padding-top: 10px;
border-bottom: 1px solid #000;
}
[/css]

２．サイドバーNEW ENTRY・記事下の関連記事と新着記事

サイドバーNEW ENTRY・記事下の関連記事と新着記事のクラスはす

べて同じなので

[css]
#topnews div dl {
clear: both;
}
[/css]

内に棒線のスタイルを加える。 子テーマに上記事項をカスタマイズする下記コードを子テーマに追加した。

[css]
/*記事と記事の間に線を引く*/

.entry {
margin-bottom: 20px;
padding-top: 10px;
border-bottom: 3px dotted #0ff;
}

#topnews div dl {
clear: both;
padding-top: 30px;
border-bottom: 3px dotted #0ff;

}
[/css]

smart.css　の変更

同じような箇所があるので、同様に棒線を追加するか

上記コードを追加しても良い。

尚、このカスタマイズは

りゅんた様の

【Stinger3カスタマイズ】棒線を加えて記事と記事を区別化しよ
う！

の記事を参考しました。

りゅんた様には、大変お世話になっております。

このブログにてご挨拶いたします。

有難うございます。