管理人『ふっく』はこんな人

賢威7.0で文字の色やフォントサイズを変更する方法

賢威7.0文字の色を変更したり、フォントサイズを変更する方法を解説していきます。サイト全体を通して変更していく場合はCSSの編集をしていく必要があります。

賢威7.0で文字の色を変更する場合

通常WordPressのテンプレートの編集を行うときはstyle.cssという場所を編集していくのですが、賢威の場合はcssが幾つかに分かれていて、賢威7.0の基本的なCSSの編集はbase.cssで行います。賢威6のdesign.cssに当たる部分になります。

賢威7.0での文字色は最初から黒に設定されています。

賢威7.0文字色変更

黒が見やすいのでこのままでいいと思いますが、作るサイトのジャンルによっては、文字を淡い色にしたいとか、グレーっぽい色にしたいってケースも有りますよね。

今回は文字の色をに変更してみようと思います。

『外観』→『テーマの編集』→『base.css』をクリック

テーマの編集 base.css

『base.css』で少し下にスクロールしていくと『賢威テンプレートの共通設定』という項目があります。

賢威
body{
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

という部分があるかと思います。こちらにcolor: #ff0000;を追加します

body{
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: #ff0000;
}
文字色 赤

赤くなりましたね。

color: #ff0000;の部分は自分が変更したい色を選択してください。

文字色はカラーコード一覧表から選んでみましょう。

参考:HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

賢威7.0でフォントサイズを変更する場合

賢威7.0ではフォントサイズは結構大きめに作られているので、今までのものよりも見やすく感じます。もっと大きくしたい、逆に小さくしたいという人は『base.css』の『メインコンテンツ』を編集しましょう。

メインコンテンツ
.main-conts{
	line-height: 1.8;
}

font-size: 1.2em;を追加します。

.main-conts{
	line-height: 1.8;
	font-size: 1.2em;
}

さきほどの1.2倍の大きさになりました。この数字を変更すると文字の大きさを変更することができます。

賢威7.0 フォントサイズ

賢威は慣れてしまえばカスタマイズのし易いテンプレートです。自分がしっくり来るカスタマイズをしていけるといいですね。

【メルマガ登録】無料オンライン講座プレゼント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です