WordPressの海外テンプレート/テーマは日本語表記をメインには考えていませんので、日本語で海外テーマを使用する場合は少し工夫が必要です。
フォントの指定は様々で難しいテンプレート/テーマなんですが、今回はDIY WordPressなりにシンプルに考えてみたいと思います。
ゴシック体の基本形は
明朝体の基本形は
海外テンプレート/テンプレートにたまにある
この場合は少しテクニックが必要です
font-familyは
欧文はコレ → 日本語はコレ → なかったらコレ
の順番です、「なかったらこれ」が「sans-serif」「serif」になりますね。
「 なかったコレ」が決まったら「日本語はコレ」を考えましょう。
Dreamweaverではゴシック体が
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
明朝体が
font-family:”ＭＳ Ｐ明朝”, “MS PMincho”, “ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, serif;
いろいろ反対意見もあるかもしれませんが、新しいPC環境を意識して今回は
ゴシック体
“游ゴシック”, YuGothic, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
明朝体
“游明朝”, YuMincho, “Hiragino Mincho ProN”, Meiryo, serif;
ここで書き忘れましたがフォント指定で「””」で囲まれたフォントが出てきました。フォントファミリーの書き方には以下のルールがあります。ちょっと気を付けてくださいね。
- 日本語が入ったフォント名を指定する場合は「”～”（ダブルクオーテーション）」または「’～’（シングルクオーテーション）」で囲む
- フォント名の中にスペースがある場合は「”～”（ダブルクオーテーション）」または「’～’（シングルクオーテーション）」で囲む
さてここからが本題なのですが先頭に欧文フォントを入れると、アルファベットを含む日本語文の場合、アルファベットが指定の欧文フォントで表示されます。
先頭に欧文フォントが無い場合、日本語フォントでアルファベットも表示されます。日本語フォントのアルファベットは日本語との相性も良いようにデザインされているのですが、せっかくたくさんの欧文フォントがあるので先頭には欧文フォントを入れたいと思います。
ポイントは日本語と相性のいい欧文フォントを選ぶということになります。
今はスマホでのアクセスも多いと思うので表示されない明朝体は外してゴシック体だけで考えたいと思います。
ゴシック体ですので明朝体に合うフォントを選ぶと失敗します。具体的には「Times New Roman」「Garamond」「Courier」「Courier New Adobe Garamond」などになります。
ゴシック体に合うのは「Arial」「Verdana」「Segoe UI」「Tahoma」「Helvetica」などなのですが「Helvetica」はfont-familyの最初に記述すると一部の「IE」で不具合が出るという情報があるので外します。
選択にあたっては文字の濃さや字間も考慮しないとアルファベットを含む日本語文の場合「何か違うな～」になっちゃいます。
今回は「游ゴシック」と文字の濃さ、字間のバランスで「Segoe UI」を選びました。保険に「Verdana」。
WordPress子テーマのスタイルシートに以下を記述すると、海外テーマもそこそこ日本語でもいけちゃいます。
body { font-family: “Segoe UI”, Verdana, “游ゴシック”, YuGothic, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: “Segoe UI”, Verdana, “游ゴシック”, YuGothic, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif; }
※メイリオが好きな人ごめんなさい。
この記事は過去に運営していた＜DIYワードプレス＞からの転載です。1年以上前に書かれたものですので情報が古い可能性があります、よく調べてから参考にしてください。
コメント