WordPressの人気テーマ「Origin」でフォントを変更する方法

WordPressの人気テーマ「Origin」でフォントを変更する方法

シンプルで多機能な良質テーマとして人気のあるOriginですが、style.cssでのフォント指定ができないという声をたまに聞きます。

またフォントサイズの指定についてもよくわからないという方がいらっしゃるようですので、まとめてみることにしました。

スポンサーリンク

Origin最新版はこちら

Origin | AlienWP | Professional WordPress Themes
Origin is a simple and elegant theme with responsive layout for better viewing on mobile devices – smartphones and tablets.

フォントを変更できない理由

フォントの変更は、通常であればテーマファイル群のstyle.cssで指定すればOKです。

しかしこのOriginというテーマは、そこに至るまでに少々手間がかかるというだけです。

素直にstyle.cssでフォントを変更できない理由は以下のとおりです。

  1. テーマのカスタマイズで指定するのが基本になっている
  2. 優先して読み込まれるstyle.min.cssが存在する

まず1はさほど問題ではありません。style.css側でどうにでもやり方があります。

問題の2は、読み込みを少しでも早くするためですが、そもそもstyle.cssがそれほど大きくないため、圧縮する必要性を感じられません。

style.min.cssを削除する

元のstyle.cssが残っている以上、カスタマイズをするうえで邪魔な存在でしかありません。

削除しても問題ないファイルですので、削除してしまいましょう。

これでstyle.cssの記述を生かせるようになりました。

!importantに頼る

スタイルシートをいじる人にはお馴染みの手法です。
!importantを最後に付けることにより、他の場所で異なる指定がされていても、こちらの記述が優先ですよ、という宣言になります。

さっそく変更してみる

フォント名に日本語表記を使うのであれば、まずはこれが必須です。一番上のコメントブロック直下にでも記述しましょう。

@charset 'UTF-8';

記述後は、忘れずにテキストエディタの機能を使い、文字コードをUTF-8(BOM無)で保存しなおしておきましょう。

次は全体のフォントを変更してみます。

テーマのバージョンにもよりますが、だいたい33行目あたりに以下の部分があると重います。

font: 0.8125em/1.692307em 'Bitter', Georgia, 'Times New Roman', Times, serif;   /* 13 / 16 = 0.8125;  22 / 13 = 1.692307 */

このfont行がフォントの指定をしいている部分です。font-size, line-height, font-familyを1行で指定しています。

これを以下のように変更してみます。

font: 1em/1.65 Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif !important; /* 13 / 16 = 0.8125;  22 / 13 = 1.692307 */

まず初めの1emは、フォントサイズの指定です。

元は0.8125emとなっていますが、これは行末のコメントにある通り、サイト全体のデフォルトを16pxとした際に、フォントサイズを13pxにするために割り算をした結果の数値です。

次の1.65は、所謂なんちゃって黄金比な数値です。この計算式も行末のコメントに記述してあります。

いよいよフォントを変更してみる

次の記述が、font-familyに該当する部分です。

ここでは、最初に欧文フォントの「Arial」を記述することで「日本語部分は日本語フォントで、英字は(あれば)Arialで」という指定にしています。

次に「ヒラギノ角ゴシック」というMacで標準となっている(いた)フォントをインストールしてあれば、日本語はそれで表示するようになっています。

Windowsでおなじみ「メイリオ」はその後に出てきます。優先順位として、「ヒラギノ角ゴシックがなければ(仕方なく)メイリオで表示」という仕組みです。

次に出てくる「sans-serif」は、「ゴシック体」という意味になります。上記2書体が存在しない場合、フォントを明朝体にはしたくないのでこのように記述します。まあおまじないと思っておけば大丈夫です。

そして最重要なのが、最後の!importantです。

これを記述した行は、他の部分で「かぶる」指定があったとしても優先されます。

Originテーマでは、style.cssとは別の部分でフォントを指定しており、それは管理画面の「外観」→「カスタマイズ」→「CUSTOM CSS」で変更することを前提としています。

しかしstyle.cssでスタイルのすべてを制御したいと思うのはデザイナーの性です。ていうかわかりにくいですし。

この方法なら、style.cssでフォントを含めすべてを制御できます。

『WordPressの人気テーマ「Origin」でフォントを変更する方法』へのコメント

  1. 名前:ryu_blacknd 投稿日:2013/10/27(日) 06:45:11 ID:589fc6ab0

    WordPressの人気テーマ「Origin」でフォントを変更する手段について解説してみました。