【初心者向け】yStandardのフォントを自分の好みに設定するやり方!

yStandard

yStandardカスタマイズシリーズ
お次はフォントを変更してみよう~です!

基本的なフォントの変更方法は、font-familyを変更するというやり方でほかのテーマでの変更方法と特に変わりありません。

ただ初心者の人がつまずくのは、font-familyを変更する際に、どのclass名を指定すればいいかわからないということだと思います。
今回はそのそれらを含めてWordPressの無料テーマyStandardでフォントを変更する方法を解説していきます!

スポンサーリンク

子テーマを使用しましょう

今回のカスタマイズでは、style.cssのファイルを編集していくので、子テーマ使用を推奨します。
yStandardの子テーマ導入方法はこちら

【自由なテーマ】yStandardの特徴と子テーマの設定方法!【WordPress】
最近よく見るようになったyStandardというWordPressのテーマを興味があったので、色々といじってみました。 いじってみたついでにこれからyStandardをテーマとして使っていこうという人のために、特徴や子テーマの設定方法につ...

子テーマって何?という方はこちらの記事をご参考ください!

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

デフォルトのfont-family

yStandardデフォルト状態では、以下のようにフォントの設定がなされています。

body{
font-family: Avenir,Helvetica neue,Helvetica,YuGothic,Yu Gothic,Hiragino Sans,ヒラギノ角ゴシック,メイリオ,Meiryo,MS Pゴシック,sans-serif;
}

上記のフォント設定をざっくり解説すると、class=bodyとなっています。
また、body内のフォントを以下のように設定しています。
英数字=Avenir
日本語=Yu Gothic(游ゴシック)

変更するやり方

最近流行りのフォント設定なので、正直あまり変更しなくてもいい気がしますが、変更したい場合は以下のような形で、style.cssにコードを追加します。

body{
	font-family:指定したいフォント名,sans-serif;
}

「指定したいフォント名」のところにフォント名を追加していきます。
英数字のフォントと、日本語のフォントをいっしょに追加するにあたっては、必ず最初に「英数字のフォント」を追加し、その次に「日本語のフォント」という順番で追加しましょう。

逆の順番で追加してしまうと、英数字のフォントが追加されないので、注意してください。

ちなみに余談ですが、「游ゴシック」というフォントは非常にきれいで個人的にも、世間的にも非常に好まれているフォントですが、若干欠点があったりします。
それはWindos8ではすごーく細くはかない感じで表示されて見にくいということ。

いまさらwindows8なんて使っている人いるの?という疑問がありますが、私が仕事で使っているパソコンはWindows8です。
Windows10に無料でアップデートできたのですが、仕事で使っているソフトが使えなくなったりする恐怖があったので、アップデートをしませんでした。
実際のところ互換性があったので、アップデートしておけばよかったと後悔していますが…

游ゴシックにはこんな欠点もあるので、一応頭の片隅に入れておいてもいいかもしれないです。

まとめ

こんな感じでフォントを変更していきます。
そのうちWebフォントの導入方法についてもご紹介したいと思います。

それでは~

コピペも良いですが・・・

テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント