サイトリニューアル：CSSでボタンと検索窓を角丸にしました！物件探し
テーマをWordPressビジネス用テンプレートセット001からWordPressビジネス用テンプレートセット004に変更しました。大幅に変更を行いましたが今回のリニューアルはクリーン&ミニマルな雰囲気にしたかったのでCSSでボタンと検索窓、パーツなど角丸にしました！下記はリニューアル後の全体画面です。
全体画面
変更点
※変更後のコードは参考までに一部公開しますがIEは基本的に無視していますのでご利用にはご注意ください。
ご存知だと思いますがIEだと角丸など表示できません。
h3
H3はこのように変更しました
下から上へのグラデーションです。まったく目立たない存在感です。
blockquote(引用)
blockquoteはこのように変更しました。下のほうが色が濃ゆくだんだん上にいくにつれてうすくなるというグラデーションです。角は丸くしてありますがIE7とかだと普通に丸くなりません・・・ソースコードは以下です。radiusの5pxの箇所で角のラウンドを調整できます。fafafaからfffへのグラデーションです。上記のh3もこのソースコードが使えます。
blockquote { padding-top: 17px;
padding-right: 17px;
padding-bottom: 17px;
padding-left: 17px;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
background: -moz-linear-gradient(top, #fff, #fafafa);
background: -o-linear-gradient(top, #fff, #fafafa);
border: 1px solid #E3E3E3;}
blockquote p { margin:0 0 5px 0; }
検索窓と検索ボタン
検索窓に影をつけてボタンにマウスをのせると色が変わるようにしました。
Htmlソースコードサンプル
<form id=”searchform” action=”http://●●/” method=”get”>
<div><input id=”s” type=”text” name=”s” value=”" />
<input id=”searchsubmit” type=”submit” value=”検索” /></div>
</form>CSSソースコードサンプル
input[type="text"], textarea {
padding: 4px;
background: whiteSmoke;
border: 1px solid #BFBFBF;
box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #828282;
}
#searchsubmit:hover {
background-color: #777;
}
#searchsubmit {
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #4B4B4B;
color: white;
text-transform: uppercase;
font-size: 12px;
padding: 5px 8px;
cursor: pointer;
}
ボタン
画像だと色を変更するのも一苦労ですがCSSだけの表示なら色コードだけで変更できるので楽ですね。
ボタンに影があり、マウスをのせると色が若干うすくなり、クリックすると押した感じにしてみました。
Htmlソースコードサンプル
<div class=”btn_s”><a href=”http://wp-site.biz/category/theme”>テーマ一覧はコチラ</a></div>
cssソースコードサンプル
.btn_s{
text-align: right;
clear: both;
padding: 10px;
margin: 10px;
}
.btn_s a,
a.btn_s {
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
text-transform: uppercase;
font-size: 12px;
padding: 6px 25px;
margin-left: 5px;
cursor: pointer;
background: #dedede;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f5f5f5′, endColorstr=’#e5e5e5′);
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border: solid 1px #aaa;
}.btn_s a:hover,a.btn_s:hover {
border-color: #999;
color: #222;
background: #e9e9e9;
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e9e9e9));
background: -moz-linear-gradient(top, #fefefe, #e9e9e9);
background: -o-linear-gradient(top, #fefefe, #e9e9e9);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}.btn_s a:active,
a.btn_s:active {
color: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#dcdcdc));
background: -moz-linear-gradient(top, #f4f4f4, #dcdcdc);
background: -o-linear-gradient(top, #f4f4f4, #dcdcdc);
-webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
-moz-box-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
}
ページナビゲーション
Wp-pagenaviをインストールをしている場合、CSSに以下のコードを追加すると下記のようないい感じになります
cssソースコードサンプル
.wp-pagenavi { margin:10px 0 10px 30px; padding:0; font-size:11px; }
.wp-pagenavi a, .wp-pagenavi a:visited { padding:5px 10px; margin:3px; text-decoration: none; color:#777; border:1px solid #bbb;
background:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wp-pagenavi a:hover { border:1px solid #2089cc; color:#2089cc; background:#fff; }
.wp-pagenavi span.pages { padding:0px; margin:0 0 14px 5px; color:#777; display:block; }
.wp-pagenavi span.current { padding:5px 10px; margin:3px; border:1px solid #a9b9b7; color:#fff; background:#a9b9b7; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wp-pagenavi span.extend { padding:5px 10px; margin:3px; border:1px solid #a9b9b7; color:#777; background:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
最後に
CSSだけで画像のような表現ができてもIEでは見れません！個人的にはIEは表示テストでしか使用しませんが、昨日アクセス解析のブラウザ比率をみるといまだにIE6を利用されている方がけっこういましたのでIE6でサイトを確認してみたら崩れまくっていました。(配布テーマはIE6でも表示は大丈夫です)
IEがある限りHTML5、CSS3は発展しないような気がします・・・自分のサイトだといいですがクライアントのサイトにはまだXHTMLしか利用できないなと痛感しました。
