賢威7.0で文字の色を変更したり、フォントサイズを変更する方法を解説していきます。サイト全体を通して変更していく場合はCSSの編集をしていく必要があります。
賢威7.0で文字の色を変更する場合
通常WordPressのテンプレートの編集を行うときはstyle.cssという場所を編集していくのですが、賢威の場合はcssが幾つかに分かれていて、賢威7.0の基本的なCSSの編集はbase.cssで行います。賢威6のdesign.cssに当たる部分になります。
賢威7.0での文字色は最初から黒に設定されています。
![賢威7.0文字色変更.png 賢威7.0文字色変更](https://nomadaffili.com/wp-content/uploads/2016/01/f49355ba86b62c3939602d4d2c7fe217.png)
黒が見やすいのでこのままでいいと思いますが、作るサイトのジャンルによっては、文字を淡い色にしたいとか、グレーっぽい色にしたいってケースも有りますよね。
今回は文字の色を赤に変更してみようと思います。
『外観』→『テーマの編集』→『base.css』をクリック
![テーマの編集.png テーマの編集](https://nomadaffili.com/wp-content/uploads/2016/01/320d80bbeef4dcce7122a8bfdd738130.png)
![base.css.png base.css](https://nomadaffili.com/wp-content/uploads/2016/01/base.css.png)
『base.css』で少し下にスクロールしていくと『賢威テンプレートの共通設定』という項目があります。
![賢威.png 賢威](https://nomadaffili.com/wp-content/uploads/2016/01/060619c92fe9207b49b2ebcfcdef547d.png)
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; }
![文字色 赤.png 文字色 赤](https://nomadaffili.com/wp-content/uploads/2016/01/c8c650ae4f714787c27edde4939aaaa4.png)
赤くなりましたね。
color: #ff0000;の部分は自分が変更したい色を選択してください。
文字色はカラーコード一覧表から選んでみましょう。
参考:HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
賢威7.0でフォントサイズを変更する場合
賢威7.0ではフォントサイズは結構大きめに作られているので、今までのものよりも見やすく感じます。もっと大きくしたい、逆に小さくしたいという人は『base.css』の『メインコンテンツ』を編集しましょう。
![メインコンテンツ.png メインコンテンツ](https://nomadaffili.com/wp-content/uploads/2016/01/046f6c83a1f9f8cf10976b0dd54dcf7a-1.png)
.main-conts{ line-height: 1.8; }
font-size: 1.2em;を追加します。
.main-conts{ line-height: 1.8; font-size: 1.2em; }
さきほどの1.2倍の大きさになりました。この数字を変更すると文字の大きさを変更することができます。
![賢威7.0 フォントサイズ.png 賢威7.0 フォントサイズ](https://nomadaffili.com/wp-content/uploads/2016/01/bec2d371680404c748e03696e3117420.png)
賢威は慣れてしまえばカスタマイズのし易いテンプレートです。自分がしっくり来るカスタマイズをしていけるといいですね。
コメントを残す