2017年08月 / 07月≪ 12345678910111213141516171819202122232425262728293031≫09月
2008.06.28(Sat)
Top Page > Web/ブログ > ブログのCSSテンプレートをカスタマイズしてフォントの絶対サイズ指定を相対サイズへ変更

ブログのCSSテンプレートをカスタマイズしてフォントの絶対サイズ指定を相対サイズへ変更

7/10に今更ながら気が付きましたが、IE6の文字サイズを「大」のままでフォントサイズの表示確認を行なっていました。このエントリーはIE6フォントサイズがデフォルトの中であることを想定して書いておりましたので、CSSでIE6用のフォントサイズ指定が全く違うことになります。修正させて頂きました。

当ブログはそれほどアクセス数は無いんだけど、Google Analyticsという無料のアクセスログ解析ツールを使っている。

何気なくGoogle Analyticsでアクセスログを見ていたら、このブログを訪れてくれる人が使っているブラウザは7割がInternet Explorer。その内の6割はInternet Explorer6というモダンだかレガシーだか分からないブラウザを使っている。
あんなブラウザは窓から投げ捨てて、とっととFireFox使ってくれよと思わなくもないんだけど、そこは個人の自由。強制する訳には行かない。

Internet Explorer6には様々な弱点というか至らないところがありまくりなんだけど、アクセシビリティ上最悪なのが、Webページで文字サイズを絶対指定している場合に、Internet Explorer6から文字サイズが変更できないという点だ。

文字サイズの絶対指定とは「px」や「pt」で指定する方法。Internet Explorer6で文字サイズが変更できないというデメリットはあるものの、Webを製作する側にしてみると思い通りのデザインが出来て、文字サイズによってデザインが崩れたり、意図しないレイアウトになってしまうことを防げるメリットがある。

アクセシビリティとは横文字で知らないという人もいるかも知れないけど、要するにページを閲覧する人がどんな環境で見ているのか分からんので、出来る限り様々な環境で閲覧可能なページにしましょうという考え。

アクセシビリティうんぬんを持ち出さなくても、目が疲れていたり体長が悪いときにいつものフォントサイズでは、ちょっとページが読みにくいと感じることは多々ある。

OperaやFireFox、Internet Explorer7ではWebページでフォントサイズを絶対指定していても、ブラウザで文字サイズを変更することはできるが、出来の悪いInternet Explorer6ではそれが出来ない。
そしてInternet Explorer6はまだまだ使っている人が多く、シェアの高いため無視が出来ないブラウザだ。

という訳でブログのCSSテンプレートをカスタマイズして、フォントサイズを絶対指定から相対指定へ変更してみた。
まず、自分で作ったのでは無く、どこドアさんのテンプレートを使わせてもらっているので、大幅に変更してしまうのは気が引ける。
それにカレンダーは相対指定にするとレイアウトが崩れまくる可能性があり、そこまで考慮してフォントサイズを相対指定するのは面倒。

なので、フォントサイズを相対指定に変更するのは、「記事タイトル」「記事本文」、そして「パンクズ」の部分にした。

まずは全体的なフォントサイズの指定を行なう。全称セレクタの「*」を使って、「font-size:100%;」を追記してフォントサイズを相対指定にする。
ちなみに全称セレクタの「*」は全てのクラスタやタグに対して指定ができるので便利。全称セレクタはもう古いなんて言われていますが、プロでもない限り拘る必要はないでしょう。利便性を取った方が賢いです。
* {
margin:0;
padding:0;
word-break:break-all;
font-size:100%;
}


次にbodyタグに対してフォントサイズを「small」での指定に変更する。ちなみにコメントは元々入っていたものです。
text-align:center; /* IEのバグを利用して画面全体を中央に */
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif; /* 画面全体のフォント指定 */
font-size:small; /* 画面全体のフォントサイズ */
color:#666; /* 画面全体の文字色 */
background-image:url(http://blog-imgs-14.fc2.com/d/o/k/dokode/bananlr.gif); /* 背景画像アドレス ()内をhttp://blog-imgs-14.fc2.com/d/o/k/dokode/bananlryuki.gifに変更すると雪が降ります */
background-repeat:repeat-x; /* 画像を横に繰り返す */
background-attachment:fixed; /* 背景画像を固定 */
background-color:#000; /* 画面背景の色 */
line-height:140%; /* 行間 */
margin:0;
padding:0;
}


そしていよいよ記事のタイトルのフォントサイズを相対指定へ変更する。ここで問題になるのは、問題児のInternet Explorer6。このブラウザは、Shift_JIS以外のエンコードだとフォントサイズが大きく7表示されるクセがある。正しくはStrictの場合にフォントサイズが大きくなる。俺が知る限り、UTF-8やECU-JPだと二周りくらい大きめに表示される。
なので、Internet Explorer6用の指定とその他のブラウザ用の指定を分けて書いてあげる必要がある。
ここではInternet Explorer6には「font-size:70%;」を指定し、それ以外には「font-size:100%;」を指定した。Internet Explorer6にもその他のブラウザにも「font-size:100%;」を指定します。
「_font-size:70%;」の頭に付いている「_」は「アンダースコアハック」というInternet Explorer6に対するCSSハックの一つ。Strict文型の場合は、このハックは不要です。
他のまっとうなブラウザでは「_」が頭に付いているプロパティは無視されるのだが、Internet Explorer6は「_」が付いていても読み込んでくれる。そこを逆手に取ったはハックだ。

ついでに行間も指定しておく。「line-height:1.5; 」が行間の指定だ。記事のタイトルが長くなり改行が発生する場合に、行間を指定しておけば見た目もよく、読みやすくなる。
ちなみに「line-height:1.5; 」は単位を指定しない方が楽。値はお好みで調整すること。
/* 記事タイトル */
.entry_title {
text-align:left; /* 左寄せ */
font-size:100%; /* 文字サイズ */
_font-size:70%; /* IE6用の文字サイズ */←不要
font-weight:bold; /* 文字太さ */
color:#000; /* 文字色 */
background:url(http://blog-imgs-14.fc2.com/d/o/k/dokode/iconnlren.gif) no-repeat top left; /* アイコン設定 */
margin:7px 10px 10px;
padding:0 10px 0 25px;
line-height:1.5; /* 行間 */
}


そしていよいよ記事本文のフォントサイズを相対指定にする。ここでもアンダースコアハックを使ってInternet Explorer6に対する指定と他のブラウザの指定を分けて記述する。ついでに「line-height:1.2;」に指定を変更する。
/* 記事本文 */
.entry_body {
text-align:left;
font-size:100%; /* 文字サイズ */
_font-size:70%; /* IE6用の文字サイズ */←不要
color:#000; /* 文字色 */
line-height:1.2; /* 行間 */
padding:0;
margin:5px 17px 15px;
}


最後がパンクズの指定。パンクズリストはテンプレートには元々無かったので後から付け加えた。パンクズのFC2ブログでの実装方法はこちらのエントリーで解説してある。
パンクズリストの指定は先ほどと同じようにInternet Explorer6とそれ以外で分けて書く。
.topic_path {
margin:7px 10px 10px;
font-size:80%;/* パンクズの文字サイズ */
_font-size:60%;/* IE6用の文字サイズ */
line-height:1;
}


以上で修正は完了。これでInternet Explorer6で肝心の記事部分のフォントサイズを大きくすることができるようになった。
全称セレクタの「*」で「font-size:100%;」を指定しているから、他の箇所でまた「font-size:100%;」を指定する必要はないんじゃない?と思う方もいると思う。全くもってその通り。削除しても構いません。

今回の場合は、「font-size:100%;」で統一することができたので不要な指定です。ただ個人的にはフォントサイズをそれぞれのセレクタ毎に明示的に示して置いた方が、後々確認しやすいと思っているので残してあります。

次に続く文章は本カスタマズとは関連性がありませんが、CSSを知る上で有益だと判断して残してあります。
また、アンダースコアハックを使わなくても、Internet Explorerの条件分岐を使えばクリーンなCSSになって気分が良い上に、容量も多少とは言え軽くなります。今回は軽微な修正で、CSSファイルの容量や可読性に影響を与えないので、そこまではしませんでした。
クリーンなCSSにしておきたい場合や、Internet Explorer以外に余計なファイルを読み込ませたくない場合は条件分岐を使ってください。

最後に表示を確認したブラウザはInternet Explorer6、FireFox2、Opera9.5です。Internet Explorer7は端末が違う上にディスプレイとキボードが一つしかないので気が向いた時に確認します。
Internet Explorer7でも問題なく表示されていることを確認しました。
関連記事

タグ(ブログ内検索もできます)CSS ブログ XHTML HTML アクセシビリティ フォント カスタマイズ

14:55  |  Web/ブログ  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP |