WordPressテーマ「Attitude」でフォントを変更する方法

スポンサーリンク
環境設定

当社ホームページでは、WordPressの無料テーマ「Attitude」を用いています。

このテーマでは、タイトルなどのフォントが、英数字については筆記体っぽい洒落たフォントになっているのですが、日本語フォントはゴシック系のフォントになっており、日本語とアルファベットが混在すると見た目がいまひとつです。

このため、フォントをゴシック系に統一しました。

「外観」>「カスタマイズ」>「Design Options」>「Custom CSS」で、以下の記述を追加します。

body, input, textarea {
color: #000000;
font: 14px 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}
#site-title {
font: 36px 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}
.entry-title {
font: 24px 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

これで、フォントが変更できました。
本文については、フォントサイズと文字色も変更しています。

 

なお、私がWordPressの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。


WordPressについては、Web上にもたくさんの情報がありますが、きちんと理解して使いたい場合には、一度書籍も読んでおいた方がいいかもしれません。