yStandardカスタマイズシリーズ
お次はフォントを変更してみよう～です！
基本的なフォントの変更方法は、font-familyを変更するというやり方でほかのテーマでの変更方法と特に変わりありません。
ただ初心者の人がつまずくのは、font-familyを変更する際に、どのclass名を指定すればいいかわからないということだと思います。
今回はそのそれらを含めてWordPressの無料テーマyStandardでフォントを変更する方法を解説していきます！
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
子テーマを使用しましょう
今回のカスタマイズでは、style.cssのファイルを編集していくので、子テーマ使用を推奨します。
yStandardの子テーマ導入方法はこちら
子テーマって何？という方はこちらの記事をご参考ください！
デフォルトのfont-family
yStandardデフォルト状態では、以下のようにフォントの設定がなされています。
body{
font-family: Avenir,Helvetica neue,Helvetica,YuGothic,Yu Gothic,Hiragino Sans,ヒラギノ角ゴシック,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif;
}
上記のフォント設定をざっくり解説すると、class＝bodyとなっています。
また、body内のフォントを以下のように設定しています。
英数字＝Avenir
日本語＝Yu Gothic（游ゴシック）
変更するやり方
最近流行りのフォント設定なので、正直あまり変更しなくてもいい気がしますが、変更したい場合は以下のような形で、style.cssにコードを追加します。
body{
font-family:指定したいフォント名,sans-serif;
}
「指定したいフォント名」のところにフォント名を追加していきます。
英数字のフォントと、日本語のフォントをいっしょに追加するにあたっては、必ず最初に「英数字のフォント」を追加し、その次に「日本語のフォント」という順番で追加しましょう。
逆の順番で追加してしまうと、英数字のフォントが追加されないので、注意してください。
ちなみに余談ですが、「游ゴシック」というフォントは非常にきれいで個人的にも、世間的にも非常に好まれているフォントですが、若干欠点があったりします。
それはWindos8ではすごーく細くはかない感じで表示されて見にくいということ。
いまさらwindows8なんて使っている人いるの？という疑問がありますが、私が仕事で使っているパソコンはWindows8です。
Windows10に無料でアップデートできたのですが、仕事で使っているソフトが使えなくなったりする恐怖があったので、アップデートをしませんでした。
実際のところ互換性があったので、アップデートしておけばよかったと後悔していますが…
游ゴシックにはこんな欠点もあるので、一応頭の片隅に入れておいてもいいかもしれないです。
まとめ
こんな感じでフォントを変更していきます。
そのうちWebフォントの導入方法についてもご紹介したいと思います。
それでは～
コピペも良いですが・・・
テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント