Facebook
RSS Feed
Feb 6, 2012

WordPress初心者講座・Q&A:文字色・文字サイズの変更方法

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

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

Minimal WPのテーマは本文のフォントサイズがだいたい13pxか12pxで出来てるんですけど、
もう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桁にしてもいいらしいですよ。

Posted in Blog, WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト