stinger3 備忘録 8

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

stinger3

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

 

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

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

 

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

 

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

棒線の種類

solid ⇒ 実線

double ⇒ 二重線

dashed ⇒ 点線

dotted ⇒ 破線

 

他にも

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

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

 

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

 

 

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

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

 

例として

1.トップ画面

2.サイドバーのNEWENTRY

3.関連記事

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

 

 

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

 

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

 

追加する。 変更後

 

 

 

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

 

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

べて同じなので

 

 

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

 

 

 

smart.css の変更

 

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

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

尚、このカスタマイズは

りゅんた様の

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

の記事を参考しました。

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

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

有難うございます。