STINGER3記事タイトル部分装飾と記事小見出しｈ２ｈ３のボーダーカスタマイズ

STINGER3記事タイトル部分装飾と
記事小見出しのボーダーカスタマイズ
 

男前な自分にぴったりな、STINGER3ですが、

今年は女性らしさを意識してSTYLEを決めていくと

誓ったので、上のようにカスタマイズしました＾＾

今回も

参考にさせていただいたのは、えけこのくるる　という

女子ブログカスタマイズ説明を行っているサイトです。

とても勉強になりました、ありがとうございます。

えけこのくるるさんでは、今までご紹介した以上に

更にカスタマイズの方法が掲載されていますが、私は

力尽きたので、STINGER3カスタマイズご紹介は、

この記事をもちまして、とりあえず終了。でもここまで

変更すれば、かなり自分色に染まったSTINGER3が拝めるのではないでしょうか？！

記事タイトルや小見出しも統一感があるとみやすい。

記事タイトルのカスタマイズ方法

例によって、子テーマの　style.cssで、書き込みを

行っていきます。　（子テーマの作り方は過去記事参照LINK )

記事タイトルの文字のカラーが気に食わない方は、

カラータグ一覧表を見て（ネットにありますよ）

以下の書き込みをします　#000000　ところを任意のカラータグに置き換えてください。

.entry-title {
color: #000000 ;
}

私は淡い色が好きなので、ぼんやり系の
カラータグを入れましたよ。

さてこのタイトルに、イラストと、ボーダー線を
毎回自動的に表示されるように以下のようにしました。

.entry-title {
border-bottom: dotted 4px #00000;
padding: 0px 5px 8px;
}

タイトル下にボーダー線をひく　border-bottom: dotted

ボーダー線の粒の大きさは　4px　のところの数値を調節、

#00000　のところに好みのカラータグを入力。

これでタイトルに下線が現れます。もちろんラインの種類も

タグを使えば、border: doubleで二重線で囲んだり、

border: dashedで、点線囲み、はたまた

ただの下線ということも可能です。お好みで変えてみてください。(丸投げ）

さて、記事タイトル左側に、ラブリーな瓶をあしらってみました

これは、やはり子テーマスタイルシートに

.entry-title {
background-image: url(http://うんたらかんたら/2014/01/midasi9.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 72px;
margin-left: -10px;
margin-right: -5px;
}

こんな感じに記述したら、表示されました。

background-image: url(http://うんたらかんたら/2014/01/midasi9.png);は、

あの小瓶をワードプレスにアップロードしたURLです。

記事内小見出しｈ２　ｈ３のカスタマイズ方法

私はシンプルにｈ２もｈ３も、ただの縦ラインで

統一しました。

color:で、文字の色もカスタマイズ
しました＾＾

h2 {
padding: 5px 10px 5px 25px;
border-left: 15px solid #f00000;
color: #000000;
}

.post h3 {
font-size: 17px;
padding: 1px 10px 4px 30px;
color: #000000;
border-left: 10px solid #000000;
}

小見出しの小見出し＜ｈ３＞の文字サイズだけ
17に指定して、＜ｈ２＞と区別しています。

ボーダーの種類も私はsolidですが、double
などの二重線もあるでしょうし、カスタマイズは
お好みでできます。

h2 {
margin:
background-color:　;
padding: 5px 10px 5px 25px;
border-left: 15px solid #00000;
color: #00000;
}

margin:
background-color:の設定で、

見出しの部分全体にカラーを付けることもできますね。

今ワードプレスのTwenty Fourteenのカスタマイズも

していますが、あちらもデフォルトでも素敵なビジュアルで

気にいっております。　Twenty Fourteen　を適用しているサイト→　流行手帖