カテゴリーアーカイブ: HTML5

HTML5に関する記事

WordPress スタイルの変更

投稿日: 作成者:
返信

この記事の所要時間： 約 3分13秒



記事タイトルとか、Widgetのタイトルとかを
CSS3を使って変更しました！

最近は、文字に影を付けたり
角丸のBOXにしたりをCSS3で簡単にすることが
出来るようになりました！

特に、スマートフォンにはHTML5/CSS3は有効みたいです。
スマートフォン用のCSS3の話は、また今度にするとして
今回は、WordPressに設定したCSS3をメモで残しておきます。

今回変更したのは
BLOGタイトル
記事タイトル
Widgetタイトル
検索BOX
を変えてみたよん。

実際には、style.cssを書き換えた程度
/wp-content/themes/[使っているテーマ]/style.css です。


BLOGタイトル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.entry-title {
	clear: both;
	color: #222;
	text-shadow: 1px 1px 1px #999;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
 
	border-style: none none none solid; 
	border-color: #3399cc; 
	border-width: 1px 1px 1px 5px; 
	padding: 5px 10px; 
	margin-bottom: 1em; 
	background-color: transparent; 
}



このスタイルで影を付けています。
text-shadow: 1px 1px 1px #999;

Widgetタイトルの角丸は

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.widget-title {
	color: #666;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
	border-style: solid; 
	border-color: -moz-use-text-color -moz-use-text-color #3399cc; 
	border-width: 1px 1px 1px 1px;  
	margin-bottom: 1em; 
	background-color: #f2f2f2; 
	padding: 0px 10px; 
	border-color: #ddd;
	border-radius: 7px;
}



このスタイルでタイトルの背景を角丸にしてます。
border-radius: 7px;

同じ感じで、検索窓とか
記事タイトルも変更しています。

参考になれば☆

追記

サブタイトルについても変更してみました。

<h2>サブタイトル</h2>


こんな感じで指定するとスタイルが変更されるようにCSSに記載を追記しました。

1
2
3
4
5
6
7
8
9

.entry-content h2 {
	font-size: 20px;
	border-style: none none solid solid;
	border-color: #ccc; 
	border-width: 1px 1px 1px 5px; 
	padding: 5px 10px; 
	margin-bottom: 1em; 
	background-color: transparent; 	
}



良い感じで表示されるようになりました〜