現在のWordPress デフォルト・テーマ Twenty Seventten において、英語フォントと日本語フォントでの質感が異なるのでそのままでは使えません。そこで調整を行ってみました。
フォントの大きさの単位は rem を使用しています。１rem は１文字の大きさ。１文字の大きさで規定した大きさが基準となります。少し分かりづらい表現ですね＾＾
html タグで font-size を 100% とした場合、ほとんどのブラウザの規定が 1em=16px ですので、そのまま一文字の大きさ16px が基準となります。 ＊ rem は絶対表示。em は同じ文字の大きさを単位としますが、相対表示となります。
通常の文章ではそのままデフォルト値として使っていける大きさなのですが、px 単位と併記の形を取りたいので、
font-size: 62.5% に調整しています。
px 単位は言うまでもなく、これまでの制作と同様の基準となるウェブの長さの単位。Internet Explore の古いバージョンで対応していないため、CSS での併記が必要となります。やがては要らなくなると思いますけれど。。
caniuse.com 詳細は caniuse.com でご確認を頂けます。
上記調整を行うことで、たとえば文字フォントを16px としたいときは、CSS にて、
font-size: 16px
font-size: 1.6rem
と、分かりやすい表記となります。
font-size=100% のままですと、
font-size: 16px
font-size: 1rem
という表記になります。各文字サイズを調整していくときに、数字の取り扱いが煩雑となりますので、（私の場合は） font-size=62.5% の調整は必須です。
細かい文字の調整がまだですが、主なタイトルの大きさは横軸にトップページと階層ページの下記ブラウザ幅を取り、
・スマホ版 （ 480px (30em )未満) ）
・タブレット版 （ 480px (30em )以上) ）
・PC版 （ 768px (48em ) 以上 ）
タテ軸に各ページの各種タイトルやリード文、本文を取り、マトリックスで調整を行いました。
・サイトタイトル
・サイトキャッチ
・ページタイトル
・ページキャッチ
・ページ｜リード文
・セクション｜中見出し
・セクション｜リード文
・ページ本文
今回はタイトルをメインに調整を進めています。
詳細は github にてご確認頂けます。現在のバージョンをダウンロードでもご確認頂けるようにしました。
ブラウザ幅の違いによるcss の記述は Media Query での設定となりますが、タイトルの大きさは必ずしも大見出しが、中見出しまたは小見出しより大きくないといけないというルールはありません。レイアウトや装飾、意味づけによって異なってきますが、今回はとくにそうした配慮をすることはなく、ある程度ウエイトの順に大きさを調整しています。
冒頭で「分かりづらい表現」をそのまま残しましたが、長さの単位に文字の大きさを使用することで、さまざまな可能性が生まれます。ブラウザ幅やパラグラフの高さを文字の大きさである em または rem で設定していくことで、メディアを問わない文字の横幅や文字数を設定していくなど可能性ある単位となります。今回このサイトでは、文字やパラグラフの境界幅などに使用していますが、少しずつ取り扱い範囲を広げていけたらと考えています。
【イベントのご案内】 ３月３日（土）の朝、ゆるゆるカフェを吉祥寺にて行います。
