【STINGER5】検索窓の表示色をカスタマイズする方法など・・・

ダウンロード___STINGER5
WordPressテーマをSTINGER5にした変更しましたが、オリジナルのままだと検索窓が分かりにくい感じです。そこで、Google検索で調べて、検索窓の背景色などの表示方法を変更しました。

検索窓の背景色を変更する方法

style.cssに次の内容を追記すると、見やすい感じにすることができます。配色については、お好みに合わせて変更してください。

[css]
#searchsubmit {
background : #4682b4 ;
}
#s {
background : #ffffff ;
border : #cccccc solid 1px ;
}
[/css]

検索窓の他にも次のような変更を行いました。すべてstyle.cssに追記する形で変更したことですが、これも自分メモとして残しておきます。

スポンサーリンク

h2 の背景色を変更する方法

[css]
h2 {
background : #4682b4 ;
}
h2:after {
border-top : 10px solid #4682b4 ;
}
h2:before {
border-top : 10px solid #4682b4 ;
}
[/css]

h2 の文字色を変更する方法

[css]
h2 {
background : #4682b4 ;
color : #ffffff ;
}
[/css]

投稿日時の上下の線と背景色を更する方法

[css]
.blogbox {
background : #f3f3f3;/*#edeff4 ;*/
}
.blogbox {
border-top-color : #CCC;
border-bottom-color :#CCC; /*#4682b4;*/
}
[/css]

リンクにマウスを載せると文字色がふんわり変わるようにする方法

[css]
a {
color : #4682b4 ;
-webkit-transition : 0.5s ;
-moz-transition : 0.5s ;
-o-transition : 0.5s ;
-ms-transition : 0.5s ;
transition : 0.5s ;
}
a:hover {
color : #3399ff ;
}
[/css]

NEW POST のリンクホバー色を変更する方法

[css]
#kanren .clearfix dd h5 a:hover {
color : #3399ff ;
}
[/css]

なお、うまく反映されない時はfanctions.php でテーマカスタマイザーを使用しない時は削除とされている部分を削除してみてください。

この記事をお届けした
「bibalogue」の最新ニュース情報を
“ いいね してチェック!
スポンサーリンク