育休男児

1年間育児休暇を取得した男の奮闘記。これからの働き方、DIY、ロードバイクなどの情報も。

WordPress カスタマイズ

[P]【TwentyEleven】ウィジェットエリアのタイトルバーを簡単におしゃれにする方法

投稿日:

WordPressのオリジナルテーマ「TwentyEleven」を編集して使っているのですが、どうもウィジェットエリアの「カテゴリー」とか「サイト内検索」といった文字がぱっとしない。私の場合だと、本文よりタイトルの文字が小さいという事態になっていましたので、変更してみます。しかも簡単な方法で。

まず、使うサービスですが、
好きな色でCSS見出しが作れます | スタイルシート見出しメーカー
というサービスを使わせていただきます。好きな色を選ぶだけでなかなかしゃれおつな見出しをHTMLとCSSで吐き出してくれるというジェネレーターです。

スクリーンショット_2013_03_16_14_20

使い方はこれだけ。選んでボタンを押してコピペ。大学生はこんな方法でレポートを作っていはいけませんよ。

スクリーンショット_2013_03_16_14_23

左にサンプル、右上にHTML、右下にCSSが表示されます。サンプルを見て作りたい見出しを決めます。今回はWordPressのテーマに使わせてもらうだけなので、CSSを全選択して(というか全選択しかできません)テキストエディタにコピペします。1つずつ「menuRibbon」とか「menuTab」と名前がついているので気に入ったサンプルの名前を探して、(今回は「menuLineLightW」にしました)

.menuLineLightW {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0 ;
	border-color:#E184A5;
	border-style:solid;
	background:#fff;
	color:#e396b8;
	line-height:140%;
	font-weight:bold;
}

「margin」から「bold;」までの部分だけをコピーします。そして、自分のテーマのstyle.cssを開いて「Widget」部分を探します。TwentyElevenだとかなり下の方でした。

/* =Widgets
----------------------------------------------- */

.widget-area {
	font-size: 12px;
}
.widget {
	clear: both;
	margin: 0 0 2.2em;
}
.widget-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

ここですね。ここの「widget-title」の「color」から「uppercase;」までを先ほどコピーしたCSSに書き換えます。で、保存してページを読み込むと、

スクリーンショット_2013_03_16_14_39

できました!配色については少し勉強しないといけませんね・・・しかし、ほんとジェネレーターを作ってくださる方は神様ですね!


-WordPress, カスタマイズ
-

Copyright© 育休男児 , 2017 AllRights Reserved.