ブログ

WordPressというCMSを使うとき、テーマを一から自分でゴリゴリ書ける人は別として、通常はたくさんある公開テーマの中から、気に入ったものを選んでインストール＆有効化して使うことになる。そして、そのテーマをカスタマイズする際は、ソースを直接弄るのではなく、「追加CSS」という仕組みを利用してスタイルを上書きする形で、少しずつ自分好みに近づけていく、という方法を取る、らしい。今回、自分のブログで実際にやってみたので、今後のためにその基本的なやり方を記録しておく。

今回ぼくが選んだWordPressのテーマはコレ。
気に入ってコレにしたんだけど、気に入らない部分もチラホラ。例えば、サイトのタイトル「Hirafuku Note」が勝手に全部大文字になってる。それは投稿のタイトルも同様で「Motion」がすべて大文字になってる。まずはコレを何とかしたい。

上の画面は、 Chrome の「表示」メニュー「開発 / 管理」から「要素の検証」に入ったところ。このモードでは、マウスカーソルを載せた要素の、ソース上の該当箇所を教えてくれる（反対にソースから要素の場所を知ることもできる）。コレを使い、まずはサイトタイトル「HIRAFUKU NOTE」を表示しているソースの位置を知り、関連のありそうな要素名を調べることで、犯人の目星をつける。

画面の右側中央付近に犯人を発見。

text-transform: uppercase;

こいつを修正してやれば良いわけだ。
まず、犯人を含む要素全体をコピーし、WordPressカスタマイズ画面の追加CSSにペースト（こうすればタイプミスを防げる）。

必要なプロパティ以外を削除し、該当プロパティの値を “uppercase” から “none” に変更。

.site-title {
    text-transform: none;
}

これでサイトタイトル文字が通常に戻った。
投稿タイトルに関しても同様に修正してやる。

さらに、気になっていた「続きを見る」のバックグラウンドの色もグレーに変更。

このように、人様の作ったテーマを使い、基本構造はそのままに、色やフォントなどの細かなデザインをプチカスタマイズして、少しずつ自分の好みに変えていく、というのが、WordPressの基本的な使い方、なのだと思う。

ちなみに、一つ前のエントリーで書いた通り、追加CSSの記入をSafariでやるとうまくいかないので注意が必要。