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

ワードプレステーマTwentyTwelveのサイドバー/ウェジェットタイトルを綺麗に美しくする方法です。

テーマTwentyTwelveのウェジェットタイトルは、デフォルト表示ですと何ともですよね?ってか、Twentyシリーズ全般に感じますが…(汗

せっかく素敵な素晴らしいウェジェットがたくさんあるんです。それらを、訪問者に分かりやすく見やすくして差し上げたいモノですよね。

ってことで、まずはウェジェットのタイトルを綺麗に見やすく表示変更しちゃいましょう♫

ウェジェットタイトルの変更はとっても簡単です!!

なんか、CSSとかって難しそう…、私もそう思いましたが、場所さえ分かればなんて事はありません。とっても簡単に素敵なウェジェットタイトルが出来ちゃいます!!

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

’スタイルシート’の中から、次の部分を見つけて下さい。

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
}

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {  /* ココです!! */
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}

’ココです!!’の部分が、ウェジェットタイトルの表示制御部分です。お好みの応じて装飾をしてみて下さい。例えば、この様に追加/編集してみましょう。↓

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
}

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 14px;
	margin-bottom: 1rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {  /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	margin: 0 0 0.714285714rem 0;
	padding: 2px 8px;
	padding: 0.142857143rem 0.571428571rem;
	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:3.5px;
        -webkit-border-radius:3.5px;
        -khtml-border-radius:3.5px;
        border-radius:3.5px;
        -moz-border-radius:0.25rem;
        -webkit-border-radius:0.25rem;
        -khtml-border-radius:0.25rem;
	border-radius:0.25rem;
	color: #ffffff;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
	font-size: 13px;
	font-size: 0.0.928571429rem;
	line-height: 2;
	font-weight: normal;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}

チョッと長くなりましたが、追加/編集してみて下さい。かなりの自信作です(笑

追加部分で長くなっているところは、’影を作る’’丸みをつける’といった装飾を施しています。そんなの要らないっ!!って方は、赤の部分は削除して下さい。

また、青の部分は、’ウェジェット間(縦方向)’の隙間が多すぎるので削りました。狭すぎると感じる方は、数値を多くしてみて下さい。

また、カラーコードについては、お好みの色にて変更してみて下さい。これで、たくさんのウェジェットを使いたくなっちゃいますよね(笑

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

 

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

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

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

  2. ピンバック: Twenty twelveへのテーマの変更をめぐって 数日間迷走した記録 ~画面の文字だけホワイトアウト! | 教師の知的生活ネットワーク

  3. ピンバック: Wordpressでウィジェットタイトルやh2、h3タグのCSSをカスタマイズ | Synapse Diary

  4. ピンバック: TwentyTwelveのカスタマイズ | 大阪で赤帽をお探しなら大阪市平野区の赤帽蔵本運送店

コメントを残す

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