SELECTED ENTRIES
CATEGORIES
RECENT COMMENTS
ARCHIVES
MY BLOGs
BOOKLOG
twitter
chinobooをフォロー!?
MOBILE
qrcode
PROFILE
OTHERS

03
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

diary - HeKoKi

ちのの日記っす
<< 1/3 oneday更新 | main | 1/10 床暖房その後、BLACK JOKERおめでと〜 >>
1/7 フォントサイズに辟易
年末にボクいち(B'z/surfaceファンサイト http://chino.boo.jp/)の移転作業をしたときに、サイト全体のフォントサイズに変更を加えてみました。WindowsとMac(解像度の違い)、ブラウザのデフォルトサイズの違いなどで、どうしても見え方が変わってしまう文字の大きさ…。いろいろと試した結果、今回は「80%」という指定を使うことにしました。

思えば最初に使ったのがポイントやピクセルでの指定(10pxとか10ptとか)。これならどの画面でも同じに見えるだろう…と思ったら大間違い。おまけに、ユーザ側で文字の大きさを変更できない(出来るブラウザもあったけど)、ということもあってボツ。…ボツと言っても、迷路化している我がサイトでは全部の設定をいっぺんに修正できずに今でもどこかに残っているかも。

その次に使っていたのが相対的な大きさ指定(smallとかx-smallとか)。これならユーザ側で拡大縮小も出来るし、ある程度「小さめな」文字がでる。

が、久々にWindowsマシンを購入して自分のサイトを見てみたら、これも幻想であったことが判明。Winマシンで見ると文字がでかくてデザインが崩れる崩れる……(涙)。こんな状態のサイトをずっと皆さんに見続けさせてきたかと思うと申し訳ない…。

そして今回使ったのは「80%」。
普通の設定よりちょっと小さい…って感じ?
皆さんのブラウザではどんな感じに映ってるんでしょう?(この日記も本文は80%の設定)

これに気がついたのは、新しく借りたサーバ、ロリポップのblogのcssを見たとき。MacでもWinでも比較的同じような感じに見えて、「おっこれだ!」と。
ボクいちのほうはサイト全体を移転ついでに全部のページを調整完了。

そこで、「ついでに本家のほうもやっちゃおう!」と思ったら大変なことになってます。
なにが大変って、

 <FONT size="-1">

という指定がものすごく多い。そう、そもそも「少し小さめの文字」で見せたいというのは1996年にサイトを始めてからずっと思っていたこと。なので、cssなんかがなかった時代には、font sizeで1段階小さいものに…というふうにしていたわけです。これが 80% という指定と相容れない。いや、相容れないというのか、むしろ-1の指定のほうが何の指定もしていないものよりも大きな文字になったりする。単位が違うんだからしかたがない…。

すべてのページに、サイト全体のデフォルトcssを読み込ませるように変更すれば楽なのだけど、このfont指定があるからこれを消さないと以前より汚いページになってしまうこと必死。


…このfont指定を一気に削除する方法ってないんでしょうかね(涙)。
| web | 14:45 | comments(13) | trackbacks(0) | - | - |
ウチのブラウザ(Win XP でフォントサイズ大きめ+デフォルト状態のIE5)ではほどよいです。

私は pt 指定にしています。Mac ですごく小さく見えるって云われたので、ちょっと大きめ。

> …このfont指定を一気に削除する方法ってないんでしょうかね(涙)。

sed とか perl で出来そうな感じですね。
| れん | 2006/01/07 9:45 PM |

<blockquote>そして今回使ったのは「80%」。</blockquote>
<p>そういえば、ここの<strong style="font:large">コメントらん</strong>って、<p style="color:green">タグ</p>は使えるのかな?</p>
| れん | 2006/01/07 9:49 PM |

文字の大きさ感想、ありがとうございます。
れんさんはpt指定なのですね。
文字指定は難しいですよね……。
結局、解がないのかもしれないですね…。
かといって、全部画像にするわけにも行かないですしね。

フォント指定は、やっぱりテキスト処理系のものでやるしかないですかね。
う〜む、がんばらなくちゃ。
とりあえず今回は放置してしまいそうです…(涙)。

コメント欄にはタグは使えないみたいですね。すんません。
| ちの | 2006/01/07 11:13 PM |

ゴミを作ってすみません(^^;)。タグのヤツは削除しちゃってください。

> 結局、解がないのかもしれないですね…。

ブラウザごとに CSS を切り替える感じですかね。個人の blog でそこまで手をかけたくないんで、「見づらい」って云われたら適宜対応しています。
| れん | 2006/01/08 12:05 AM |

私もpt指定だったような。smallだったかな(あやふや)。
ブラウザのフォントサイズをいじったらなんだか表示がアンバランスになっちゃって、へこきとかライブドアブログはすごく小さいフォントに見えます。直そうっと(笑)。

私だったらDreamweaverMXでサイト一括変換しちゃうかなあ。お役に立てなくてすびばせん。でもここよんだらリニューアルをやる気になりました。ありがとー
| こっぺ | 2006/01/08 2:04 PM |

>れんさん
ブラウザごとのチェックは個人でやるには面倒ですよね…。
ブラウザもどんどん新しいものが出てくるし…。
でも、究極はそこなのかなぁ〜。

>こっぺさん
mconのcssを覗いたら、smallなどの指定が主みたいでした。
mconはうちのwinマシンでもいい感じの文字の大きさだなぁ〜。
ど〜してうちの旧ぼくいちはあんなにでかい文字になったんだろう…。
charsetやdoctypeに指定にも関係あるかな…。
Dreamweaverで見るとcharsetによってフォントの大きさが変わったりして変だな〜と思ったりしているんです。

DreamweverMXで一括変換…って出来るんでしたっけ。
単純にfont指定を全部チャラにすることはできなかったりもするんですが、そういう指定が出来たりしたら使ってみたいです。
わたしも今はDreamweaverMXつかってます。
あとね、<center>指定とか…。いまならalignでタグに埋め込むんだけど、昔は<center>タグを多用していて、それが気持ち悪くて…。
| ちの | 2006/01/08 3:32 PM |

doctypeを宣言したらWinのIEで文字の大きさが変わりました。
旧ボクいちのファイルで試してみました。
http://sound.jp/bokuichi/bz/news-2004.html
http://sound.jp/bokuichi/surface/news-2004.html
この2つのファイルで文字の大きさ違いますか?

むむ〜〜〜。難しい。何故だ〜?
泣いちゃいそうです(涙)
| ちの | 2006/01/08 3:48 PM |

MacでもIEだとdoctypeを記述するかしないかでsmall指定の文字の大きさが全然違いました。最近はMac上のSafariとFirefoxしか使ってなかったから気がついていませんでしたよ。Winだからだと思っていたのは、“IEだから”だったということだったみたいですね。

どっちにしても、doctypeを全部のファイルに埋め込むなんてことをしなければいけないってことに気がついたわけで、さらにさらに面倒なことになってしまった今日この頃のワタクシでした(涙)。

あぁん、ど〜にかしてぇ〜!
| ちの | 2006/01/08 4:21 PM |

DOCTYPE宣言がないとブラウザのデフォルト値?になるようですね。

このへん役に立つかも。
http://www3.tokai.or.jp/janboon/co/size.html



| れん | 2006/01/08 4:58 PM |

そうそう、そこを見つけてわかったんでした。
検索して同じところを見つけてました。

ところで!
私の80%の設定の問題点を発見!
body, tdにfont sizeを指定するというおおざっぱな指定をしていたら、doctypeを指定した後、tableの入れ子になると80%が乗算されることを発見!……たしかにそうかも(涙)。
つーことで、やっぱり80%なんてのはやめてdoctype+smallに戻したほうが良さそうだって結論に…なる…???

も〜いやっ!(涙)
| ちの | 2006/01/08 7:17 PM |

ついでに、こんなサイトも見つけました。
HTMLチェック。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

がんばってcss化したつもりのボクいちの表紙をやったら 30点 「がんばりましょう」になっちゃったよ。とほほ…。
でも、これ、面白い〜。HTML+cssの勉強になる。
そのかわり、作業時間がどんどん増える。
ははは。
| ちの | 2006/01/08 7:20 PM |

htmlチェック、面白いですね。やってみよっと。
Dreamweaverでは、Find&Replace機能を使います。一番上の"Find In"のプルダウンメニューから、置換させたい範囲を選択するのがコツ。私は、ローカルサイト全体でやると危険なので、開いたドキュメントの中だけにしてます。

ところで何枚くらいあるの?直したいHTML。
| こっぺ | 2006/01/10 2:03 AM |

面白いでしょ、HTMLチェック!
ただいま、ファンサイトのほうを1ファイルずつチェックしつつ修正中です。

一括変換の方法は地道な方法しかなさそうですね…。
タグの整合性をとりつつHTML→styleという変換をしてくれる機能があれば…と思ったんだけど…。修正したいのは本家のなかの古そうなファイル全部(旅行記、昔の日記など)…だから……きっと数百枚。整合性チェックしつつ全部だと、やっぱりしばらくは肩こりが治らないかも(苦笑)。たかが個人サイトのメンテにそれだけ時間かけるのもバカな話なのかも。やっぱり気がついていつつも放置するべきか…(苦笑)。
| ちの | 2006/01/10 7:28 AM |










トラックバック機能は終了しました。