【Simplicity2】フォントを変更する方法

【Simplicity2】フォントを変更する方法

WordPressの無料テーマ『Simplicity2』のデザインカスタマイズフォント変更編です。

『Simplicity2』は一般的なフォントを使用していますが、CSSを変更することでデザイン性の高いフォントに変更することができます。




フォントを変更する方法

フォントを変更する方法

CSSでフォントを変更するためには「font-family」というプロパティを利用します。

font-familyの注意点

「font-family」の基本的な書き方は、他のプロパティと同じように書くのですが、少しだけ注意が必要です。

それは、フォントにはOSによって表示できるものと表示できないものがあることです。

そのため、「font-family」を指定するときは複数のフォントを指定する必要があります。

実際に指定する際は、以下のように指定します。

font-family: ‘Segoe Script’,’Zapfino’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,sans-serif;

この例では、

  • Segoe Script
  • Zapfino
  • Hiragino Kaku Gothic ProN
  • ヒラギノ角ゴ ProN W3
  • sans-serif

のフォントが指定されています。

  • Segoe Script → Windowsのみ
  • Zapfino → Macのみ
  • Hiragino Kaku Gothic ProN → MacとiOS9以上
  • ヒラギノ角ゴ ProN W3 → MacとiOS9以上
  • sans-serif → 全て

というようにOSによって表示できるものとできないものがあるので複数指定します。

順番が早いもののほうが優先的に表示されます。

sans-serif」はどのフォントも表示できなかった場合に表示されるフォントで、日本語では「ゴシック体」を指します。

font-familyを生成する

上で書いたように、「font-family」は自分で考えるには少々厄介です。

そこで、「font-family」を生成してくれるサイトを利用します。

Font-familyメーカーbyサルワカ

Font-familyメーカーbyサルワカ

こちらのサイトで好きなフォントを探しながら「font-family」を生成することができます。

好きなフォントをドラッグ&ドロップするだけで自動で生成してくれます。

Simplicity2の記事タイトルのフォントを変更する

Simplicity2の記事タイトルのフォントを変更する

では、実際に『Simplicity2』をカスタマイズしていきます。

今回は、「記事タイトル」のフォントを変更していきます。

完成イメージ

変更前

変更前

変更後

変更後

※上の画像は「遊ゴシック」に変更しています。

少しわかりずらいかもしれませんが、赤枠の記事タイトルのフォントが変わっているのがわかると思います。

記事タイトルのフォントを変更する方法

テーマの編集を選択してください。

WordPressの「ダッシュボード」から「外観」→「テーマの編集」を選択してください。

スタイルシート(style.css)を選択してください

右のほうにあるファイル一覧から「スタイルシート(style.css)」を選択してください。

以上のコードを追記して、「ファイルを更新」を選択すれば完了です。

今回は、記事タイトルで説明しましたがクラス」「ID」を指定することによって大概のフォントは変更することが可能です。

まとめ

Simplicity2』のデザインカスタマイズ「フォント変更編」でした。

フォントはサイトの印象に大きく関わってくる大事な要因なので、サイトのデザインに合わせて変更してみましょう。

変更する際は、すべてのOSでどのように表示されるか考慮したうえで変更しましょう。

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク