2012-02-06

WordPressサイト内の文字色・文字サイズの変更方法

Minimal WPのテーマをカスタマイズするのに必要な技術を、
このブログでは随時解説していきます。
めーーーーーーっちゃんこ初心者向けの内容をひたすらやりますので、
そんなん知ってるわーっていう人はすっ飛ばして、また明日ご訪問ください!

本日のテーマは「文字色・文字サイズの変更方法」です。

本文のフォントサイズが14pxがいいか15pxがいいか16pxがいいか、
もう1px大きい方がいいなー小さい方がいいなーとか、
この辺は好みがありますので、カスタマイズしたくなるポイントでは無いでしょうかね。
あと文字の色ももうちょと濃い方がいい、薄い方がいい、カラフルな方がいいとか。

その辺の変更方法を解説します。

文字色・文字サイズの変更

ダッシュボード>外観>テーマエディター(テーマの編集)>スタイルシート

基本的にスタイルシートをちょいちょいっといじるだけです。簡単。
スタイルシートを開くと、こんなことが書いてある部分があります。

*テーマファイルをいじる時は必ずメモ帳とかにバックアップを取って、失敗しても戻れるようにしてくださいよ!

/* ************************************************
* 基本設定
* ************************************************ */

body{
font: 13px arial,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,”Meiryo”,Osaka,”MS Pゴシック”,”MS PGothic”,Sans-Serif;
color:#444;
line-height:180%;
background: #f7f7f7;
}

細かい数字はテーマごとに違うんですが、だいたいこんな感じのことが最初の方に書いてあります。

もうお分かりのように、以下の部分が文字のサイズです。

「font: 13px」

なので、これを14とか15とか好きな数字に変えて保存。で、確認してみていい感じになったら完成。
簡単ですねぇ〜。
最近はテキストは13か14が主流かなーと思うんですけど、個人的には12が好きです。

そして文字の色。
これももうお分かりですね。

「color:#444;」

これが文字の色です。colorって書いてあるんだから色に決まってますわね。
この数字を変えればいいんですけど、数字じゃ色が分からんわ!っていう話ですよね。
なので、そんな時は、インターネッツの素晴らしいサービスを使います。

html 色」とかで検索すると、カラーチャートのサイトがいっぱい出てきます。
なのでそっから適当に好きな色を選んで、そこに書かれてる6桁の数字をコピーしてきます。
そして「444」を書き換えるだけです。
「#」は絶対いるので消しちゃダメですよ!あとおしりの「;」も消しちゃダメですよ!
ちなみに444は444444の省略版です。おんなじ数字の時は3桁にしてもいいらしいですよ。

ちなみにちなみにですが、シンプル&ミニマルデザインのMinimal WPテーマは、
使ってるカラーはほとんどのテンプレートで「白」「黒」「グレー」のみです。
写真やイラストでカラーを使う場合は、サイトの文字や背景なんかは、
できるだけシンプルに色数少なめにした方が、おしゃれ度高めになると思います。

WordPress テーマ 一覧を見てみる>

おすすめWordPressテーマ10選
by タグ: ,