You are currently viewing WordPressテーマのプチカスタマイズ方法(追加CSS)

WordPressテーマのプチカスタマイズ方法(追加CSS)

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でやるとうまくいかないので注意が必要。

2件のコメントがあります

  1. yosyuki domoto

    いつの間にかこちらが更新されてるのに驚きました。(驚いちゃいかんか)

    ワードプレスのデザイン変更、懐かしいです。僕もこのようなやり方でちびちびやってました。
    もう長くやってないのでほとんど忘れてますが、あの頃は夢中でしたね。

    ところで、ファビコンってあるでしょ。
    ワードプレスで作ったサイトは、標準でワードプレスのマークがファビコンになってるようですね。
    これを見ると一目で、あぁワードプレス使ってるわ。ってわかっちゃうね。(別に良いけど・・・)
    ファビコンを変えるのもやったことありますよ。簡単でした。

  2. mi

    見〜た〜な〜、。こっそり更新していたのに、見つかるとは!
    domotoさん、ホントいろんなこと知ってはりますね。
    写真に自動車に建築にワードプレスに、、な、何者??
    ファビコンてなに?て思って調べて、あぁこれファビコンていうんだ!てなりました。
    いつも勉強になります。
    でも最近目にする機会がグッと減ったので、全然気がついてませんでした。
    safariだとアドレス表示させない限り出てこないし。
    おっしゃる通り、確かにもろばれで、ちょっと恥ずかし、。
    変えるの、やることリストに入れておいて、また挑戦します。
    (わからなかったらdomotoさんに泣きつきます)

コメントを残す