完全Macの生活に変わって丸2年くらい経ちます。以前は仕事でWindowsを使用しており、Office文書を作成していたのでどうしても完全Macの生活に移れませんでした。 今は、文書作成の必要はあってもファイルで他所とやりとりをする必要がないため、iWorkのアプリを使って文書作成をしています。 さて、完全Mac生活に慣れてしまうとWindowsのあることが気になって仕方ありません。 それは、、、、フォントの汚さです。もちろんWindows Vista以降メイリオなど奇麗なフォントが出て来ていますが、やはりMacのヒラギノフォントなどにはかなわない気がします。僕のMacBook Proは2011年モデルのためRetinaディスプレイではありませんが、きっとRetinaディスプレイのMacBook Proは奇麗なんだろうなぁと思います。 ブログも折角だから奇麗なフォントで見えるといいなと思い、Wordpressで奇麗なフォントで表示されるように子テーマを作ってみました。 Webourgeonさんのブログでは、style.cssにて親テーマのCSSを読み込んでから上書きしていく古典的方法ではなく、wp_enqueue_styleを使った方がよいと書かれていますが(記事参照)、今回は古典的方法で子テーマを作成しました。 [css highlight="3,8"] @charset "utf-8"; /* Theme Name: TwentyTwelve akahaba custom Theme URI: http://akahaba.mond.jp/akahaba/ Description: Child theme for the Twenty Twelve theme for WordPress Author: akahaba Author URI: http://akahaba.mond.jp/akahaba/about/ Template: twentytwelve Version: 0.1.0 */ @import url('../twentytwelve/style.css'); [/css] これがWordpressの子テーマであることを認識するために、上記のような情報を書く必要があります。必須の情報は3行目のTheme Nameと8行目のTemplateのみです。それ以外は出来たら書きましょうという情報です。 子テーマを格納するフォルダは親テーマと同じ階層にしましょう。 さて、実際に上書きするcss設定を書きましょう。今回はbodyのフォント設定なので下記のような情報を設定しました。 [css] body { font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif; } body.custom-font-enabled { font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック","Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }[/css] これでWindows環境であればメイリオが、Macならヒラギノゴシックで優先的に表示されるようになります。 Macでの違いは以下のとおり フォント指定前 スクリーンショット 2013 02 10 20 57 44 フォント指定後 スクリーンショット 2013 02 10 20 58 49 ちょっと違い分かりづらいですかね ^ ^;;