WordPressのオリジナルテーマ「TwentyEleven」を編集して使っているのですが、どうもウィジェットエリアの「カテゴリー」とか「サイト内検索」といった文字がぱっとしない。私の場合だと、本文よりタイトルの文字が小さいという事態になっていましたので、変更してみます。しかも簡単な方法で。
まず、使うサービスですが、
好きな色でCSS見出しが作れます | スタイルシート見出しメーカー
というサービスを使わせていただきます。好きな色を選ぶだけでなかなかしゃれおつな見出しをHTMLとCSSで吐き出してくれるというジェネレーターです。
使い方はこれだけ。選んでボタンを押してコピペ。大学生はこんな方法でレポートを作っていはいけませんよ。
左にサンプル、右上にHTML、右下にCSSが表示されます。サンプルを見て作りたい見出しを決めます。今回はWordPressのテーマに使わせてもらうだけなので、CSSを全選択して(というか全選択しかできません)テキストエディタにコピペします。１つずつ「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に書き換えます。で、保存してページを読み込むと、
できました！配色については少し勉強しないといけませんね・・・しかし、ほんとジェネレーターを作ってくださる方は神様ですね！
