WordPressにも慣れてきた。せっかくJetpackを使えるようにしてみたので、その中の機能、カスタムCSSを使ってブログの見た目を変更してみたい。何しろ、テーマTwenty Fourteenでは、どうも文字周りの見た目が申し訳ないがカッコ悪いのだ。
たとえばこの投稿タイトルは英文の小文字がすべて大文字になっている（Jetpack→JETPACK）。それ以前に、MacはともかくWindowsでは「MS P ゴシック」などが使われるらしく、見た目もイマイチだ。
そこで、カスタムCSSで、最小限の見た目の調整を行ってみたい。
まず、カスタムCSSとは、テーマを編集することなく、スタイルシートの上書きを行えるようにする仕組みだ。テーマを直接編集してしまうと、別のテーマにしたときにまた同じような編集を行ったりする必要があるが、それが不要になる。もちろん、テーマごとに最適な設定というものがあるから、万能ではないが…。
CSSを編集するには、「外観」メニューから「CSS編集」をクリック。すると、いきなり「CSS スタイルシートエディター」が開く。
ここで、スタイルシートを書き込んでテーマの設定を上書きし、「スタイルシートを保存」をクリックすれば、変更が反映される。
さて、ここではスタイルシートの書き方は省略。まずは、投稿タイトルの小文字が大文字にならないようにしよう。テーマのスタイルシートでは、クラスentry-titleが投稿タイトルのCSSクラスだ。ここを見ると、こうなっている。
.entry-title {
………
text-transform: uppercase;
}
これでは、全部大文字になってしまう。そこで、以下の内容をスタイルシートエディターで追加してみる。
.entry-title {
text-transform: none;
}
noneは、文字どおり何もしないという意味だ。保存後、ページを見てみると、おおお、普通に表示されているがな。これが普通に思うんだけど、なぜに全部大文字なのか？
こんな感じで、フォントも変えられるはず。ただしフォントの場合、投稿タイトルだけ変えればいいってもんじゃなくて、全体の一貫性が必要だ。ということは、変えるところは違うはず。
以下のスタイルシートを追加してみよう。これで、フォントファミリ「Meiryo」（メイリオ）があればそれが使われる。なければ、Sans-serifフォントが適当に使われる。
body {
font-family: ‘Meiryo’, Sans-serif;
}
保存後、見てみると、何だかスッキリした感じ。Windowsでは、メイリオが使われるようになるので、全体の違和感がなくなる。Macではメイリオがないので、デフォルトのヒラギノ角ゴシックが使われる。
こんな感じでカスタマイズしていくと、標準テンプレートでも見た目を安全にどんどん変えられる。もちろん、CSSの知識は必須になるが、これを機会に勉強してみるのもいいかもしれない。オススメ。
コメント