stinger3 備忘録 8

stinger3 備忘録stinger 3, カスタマイズ, ワードプレス, 記事と記事を区別化stinger3 備忘録, カスタマイズ, ワードプレス, 記事と記事を区別化

stinger3

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

 

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

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

 

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

 

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

棒線の種類

solid ⇒ 実線

double ⇒ 二重線

dashed ⇒ 点線

dotted ⇒ 破線

 

他にも

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

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

 

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

 

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

 

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

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

 

例として

1.トップ画面

2.サイドバーのNEWENTRY

3.関連記事

4.新着記事 等があります。

 

 

1.トップ画面の記事と記事の間に入れる

 

[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]

 

 

2.サイドバー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カスタマイズ】棒線を加えて記事と記事を区別化しよ
う!

の記事を参考しました。

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

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

有難うございます。