今さら聞けない、WordPress「Twenty Twelve」のカスタマイズ〜サイドバーのウィジェットのタイトル周りを変更

現在、当ブログのWordPressのテーマはデフォルトで用意されている「Twenty Twelve」を使用しています。
特に理由はないのですが、当ブログが“初・WordPress”でしたので、奇をてらわず標準的なもので進めてみようという感じでしょうか。

ただ、やっぱりあちこちに気になるところは多々あるので、そこは好みにカスタマイズしたいところです。

ということで今回は、サイドバーのウィジェットのタイトル周りをカスタマイズしたいと思います。

まずはサイドバーのウィジェットのタイトルは、とにかくフォントサイズが小さいです(好みでしょうが)。

20130410_sidebar_1

それと、このTwenty Twelveというテーマは元々すっきりとシンプルなのが特徴ですが、それにしても個人的にはすっきりし過ぎのような…
ということで、タイトルを帯にして、少し目立たせたいと思います。

こういうのは、スタイルシートを修正するわけですが、お断りしておきますが、小梅太郎はCSS初心者です!(笑)

当ブログは子テーマを作っているので、そちらのstyle.cssにコードを書き加えることになります。

まずは、元の親テーマのstyle.cssで該当箇所を探すと,ここでしょうか。

変更前

/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
font-weight: bold;
text-transform: uppercase;
color: #636363;
}

色はブログとして、今後統一したカラーにしていきたいところなのですが、まだまだ模索中なので、さしあたってはグレーにしておきます。
ちなみに上の単位で、14px=1remです。

変更後

/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
font-size: 14px;
font-size: 1rem;
line-height: 180%;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
background:#333333;
padding:1px 10px;
}

あまり詳しくない身としては、とにかく数値を変更しつつ、その見栄えを確認しながらの、カット&トライですが、

20130410_sidebar_2

これで、ちょっとは引き締まったかな。
(まあ、これも好みによりますけどね)

とりあえず今回はこれでOKということにして、今後もこの標準のテーマ「Twenty Twelve」を少しずつカスタマイズしていこうと思いますが、それによって、WordPressの理解も深まるといいですね。
(WordPressも初心者の小梅太郎なもので)

※今回、こちらのサイトを参考にさせていただきました。ありがとうございました。
Twenty Twelve ウィジェットのタイトルを大きく

【関連記事】こんな記事も書いてます。
今さら聞けない、WordPressのテーマをどうするか
今さら聞けない、WordPressのテーマをいじる時の子テーマとは何?
今さら聞けない、WordPressのテーマ「Twenty Twelve」のサイドバーとメインコンテンツの幅の比率を変えたい