TwentyEleven サイドバー/ウェジェットタイトルの表示変更

ワードプレステーマTwentyElevenのサイドバー/ウェジェットタイトルの表示変更をしてみましょう。

テーマTwentyElevenのウェジェットタイトルは、デフォルトだと全然目立ちませんよね…(汗 デフォルト表示は、これです…(汗

カテゴリー  ⇐(コレですこれっ!!)

これは、チョッと…どころじゃありませんよね???

ってことで、これを、美しく目立つようにカスタマイズしていきましょう。まず、サンプル例をみてみましょう♫(チョッと見づらいかもですが…)
カテゴリータイトル①

おっ!?全然違いますよね?こんな感じにアレンジ/装飾していきます。色は、お好みで変更して下さいね。

また、このウェジェットタイトルですが、随分真ん中寄りですよね?デフォルトだと。これを、左端に寄せる方法は、プラグインを使っています。コチラのページを参考にしてみて下さい。

ウェジェットタイトルを左に寄せるプラグイン

ウェジェットタイトルもCSSが分からなくても大丈夫!!

それでは早速、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの中から、次の箇所を探してみて下さい。

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

.widget-area {
	font-size: 12px;
}
.widget {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	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;
}

↓これを、次の様に追加/編集してみて下さい。

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

.widget-area {
	font-size: 12px;
}
.widget {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	clear: both;
	margin: 0 0 2.2em;
}
.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

これで、上記のサンプルの様なウェジェットタイトルになったハズです。

参考サイト:スタイルシート 見出しメーカー

 

これに、さらに手を加えるとこんな風にアレンジする事が出来ます♫
カテゴリータイトル②(影付き)
’タイトルに影をつける’

.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

青の部分を加える事で、タイトル表示に’影’をつける事が出来ます♫

また、角に’丸みをつける’ことも出来ます♫
カテゴリータイトル②(丸み付き)
’タイトルの角に丸みをつける’

.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	-moz-border-radius:2px;
        -webkit-border-radius:2px;
        -khtml-border-radius:2px;
        border-radius:2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

両方を加えてみると…

.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px;
	-moz-border-radius:2px;
        -webkit-border-radius:2px;
        -khtml-border-radius:2px;
        border-radius:2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

こんな風になりました☆
カテゴリータイトル②(影,丸み付き)
’ウェジェットタイトルに’影’’角の丸み’をつける

少し長くなりましたが、これで見やすく美しい’ウェジェットタイトル’になったハズです。色味は、お好みのカラーコードに変更してみて下さいね☆

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

 

にほんブログ村 ブログブログ ブログノウハウへ

TwentyEleven サイドバー/ウェジェットタイトルの表示変更” への3件のコメント

  1. ピンバック: TwentyEleven サイドバー/ウェジェットタイトルの表示変更 | Twenty Eleven/Twelve with Webmix Site

  2. ピンバック: TwentyEleven 記事タイトルに影をつけて立体的に見せる | 初めてのワードプレス カスタマイズ

  3. ありがとうございます。
    勘違いさせて申し訳ありません。
    カテゴリの文字ではなく、カテゴリ(メニューリンクのテキスト)の文字サイズのことです。(が・・・解決しました!)
    この表示変更も参考になりました。
    教えていただいて、ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です