Hatena::Grouptheme

n-yujiのテーマ作り日記

2004-07-31Macのブラウザでのフォント表示について

Mac向けに「Osaka」を指定しないほうがいいのでは?

はてなブックマーク - Mac向けに「Osaka」を指定しないほうがいいのでは? - n-yujiのテーマ作り日記

n-yujiは、会社ではMacOS X&MacOS 9を、自宅ではWinXPを使っていますので、結構いろんな環境で確認できる立場なのです。まあ、あまり会社ではてなとか見てるわけにもいかないんですけれど(^^;)

テーマ作成にあたって、MacとWinのブラウザ表示の違いやCSSについて、改めて調べていくうちに気がついたことがあります。それは、Mac向けにCSSで「Osaka」を指定しないほうがいいんじゃないか、ということなのです。

その理由は……

はてなブックマーク - その理由は…… - n-yujiのテーマ作り日記

MacOS 9以前のシステム標準フォントはOsakaです。OS 9+IE5では、指定しなくても和文はOsakaで表示され、他にフォントの選択肢はないと言ってもいいと思います。

対して、MacOS Xの標準フォントは、Osakaではなくヒラギノシリーズです。デスクトップのフォントはすべてヒラギノで、美しいアンチエイリアス表示です。

OS XにもOsakaは入っているのですが、実はあまり目にする機会がありません。過去データとの互換のために一応残されたのかな~という感じの扱いです。

OS X+Safariでは、指定しなければ和文は「ヒラギノ角ゴ Pro W3」で表示されます*1

ですが、OS X+IE5.2では、標準フォントが「Osaka」となっています。たぶんOS 9のIEと見映えの互換を保つためでしょう。

MacのIEはすでに開発を終了しています。今はまだIEを使っている人も多いと思いますが、今後(あるいはすでに)Macのブラウザの主流がSafariに移るのは間違いないところです。

つまり、Mac向けに、CSSで「Osaka」を指定した場合、Safariで「ヒラギノ角ゴ Pro W3」ではなく「Osaka」を表示させてしまうことになるわけで、これは今となっては意味がないというか無用な処理です。

NN4の文字化け対策

はてなブックマーク - NN4の文字化け対策 - n-yujiのテーマ作り日記

唯一、Osakaを指定する意味があるとすれば、Mac版NN4の文字化け対策です。この場合、Osakaをfont-familyの「一番最初に」指定しないといけないそうです(未確認ですけど)。

「ウェブマスターのための文字化け講座」*2

http://www.shtml.jp/mojibake/font.html

Amazonのサイトなどは、なるほど確かにそういう指定になっています。

*1:もう少し正確に言うと、標準フォントは欧文のHelveticaで、和文のところがヒラギノ角ゴ Pro W3の表示になります。

*2:関係ないですけど、このサイトの『 「美乳」で文字化けが直るって本当?』には、文字コードの奥深さを再認識させられました、はい。

DocSeriDocSeri2004/08/02 09:01ヒラギノ,Osakaの順に指定するとヒラギノがないときに限りOsakaを使用するようにできるのではありませんでしたっけ。

n-yujin-yuji2004/08/02 13:08あぁ、そうするとOS XのIEでもヒラギノが表示できるわけですね〜。でも、その場合もOsakaは省略しちゃっていいような気がするんですよ。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040731

2004-07-30

表示は直りました。

はてなブックマーク - 表示は直りました。 - n-yujiのテーマ作り日記

なるほど、やっぱりeucじゃないとまずいんですね。ローカルの作業は、何かと融通の利くshift-jisでやってるんですけれども。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040730

2004-07-28

「kitchen-natural」公開されました。

はてなブックマーク - 「kitchen-natural」公開されました。 - n-yujiのテーマ作り日記

今、WinXP+IE6で見てるんですが、グループ日記での表示がおかしいのです。他の環境だと大丈夫なんですが。なんでだろう? こちらの問題なのかなあ……。

あと、タイトル上のメニューとアンテナモジュールは指定し直さなくては、と思いました(汗)。

それから、「kitchen」シリーズは、こういうデザインなので、それほどヒットすることはないだろうと思いますが、ランキングに入らなかったりしたら、ソレはちょっとアレだなぁ……とか思っています(大汗)。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040728

2004-07-24ひとまず完成

ひとまず完成です。

はてなブックマーク - ひとまず完成です。 - n-yujiのテーマ作り日記

テーマ「kitchen-natural」は、ひとまずこれで完成です。どうでしょうかid:jkondoさん? 問題なければ、データをまとめてお送りします。

分からない点:

はてなブックマーク - 分からない点: - n-yujiのテーマ作り日記

ひとつ分からなかったのが、はてなのヘッダの扱いです。「かんたんデザイン設定」に入っているテーマでは、はてなヘッダも含めて色の指定をしているようですけれど、これは必須なのでしょうか。デフォルトの色を指定しないといけないんでしょうか?

この「kitchen」の場合、はてなヘッダを含めてデザインしようという考えがなかったといいますか、「かんたんデザイン設定」を使ったとしても、ヘッダ部分だけ色を変えてみるという使い方もいいんじゃないかなと思っているのです。

既知の問題:

はてなブックマーク - 既知の問題: - n-yujiのテーマ作り日記

  1. MacOS9のIE5で、sidebarの動きがどうも怪しい。
  2. WinXPのIE6で、「検索」ボタンの形が変?

その他、いろいろ指定が足りないところがあるような気がしなくもないのですが……。

今後の予定:

はてなブックマーク - 今後の予定: - n-yujiのテーマ作り日記

このシリーズで2、3色追加します。ブラウン・ブルー・ピンクあたりかなぁ。

ですが、それはいったん後回しにして、二番目のテーマ作りに入ります。次はMT風?の比較的スタンダードなものを作る予定。

jkondojkondo2004/07/28 13:09テーマの色は同時に指定してください。

jkondojkondo2004/07/28 13:09あ、ヘッダの間違いです。

jkondojkondo2004/07/28 13:12とりあえず茶色にしときますね

n-yujin-yuji2004/07/28 13:37了解しました。茶色でお願いします。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040724

2004-07-18

あじさい

hatena-div.description?キーワード化してみます。

ミスった(大汗)。

div.hatena-descriptionでした。

テーマ「kitchen(仮)」

はてなブックマーク - テーマ「kitchen(仮)」 - n-yujiのテーマ作り日記

n-yujiの最初のテーマ「kitchen(仮)」です。こういう方向の需要もあるだろうと思うわけで。デザイン的にはいちおうほぼ完成ですが、いろいろ調整中です。モジュールの指定方法とか、まだまだ理解が追いつかず。

kamiokakamioka2004/07/19 01:24あったかい感じがします。これは需要ありそうですね。そうか、ベタなボーダーは木製のブロックに合うんですね。勉強になります

smoking186smoking1862004/07/19 02:42WinXP+Firefox0.9で見るとsidebarがmainに侵食してます。170+(6+4)*2+90 > 210が原因かと。

smoking186smoking1862004/07/19 02:51侵食する場合と侵食しない場合があります。なんででしょう。さてはて。

n-yujin-yuji2004/07/19 10:12むう、ほんとだ。ちょっと動かすと位置が戻りますね。すみません、CSS Validatorで解析したらいくつか単純ミスがありました(汗)。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040718

2004-07-12

積ん読

リード文その後

はてなブックマーク - リード文その後 - n-yujiのテーマ作り日記

ええと、「リード文」(div.description?)に関する話ですが、言い出しっぺなのに、いまいち加われなくて申し訳ないです。とりあえず流れは追ってますので。短期間にずいぶんいろいろな意見が出ましたね。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040712

2004-07-11

メモ

はてなブックマーク - メモ - n-yujiのテーマ作り日記

http://d.hatena.ne.jp/hkn/20040711

http://d.hatena.ne.jp/sasada/20020711

「リード文」の件に関してトラックバック頂きました。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040711

2004-07-10hatena-bodyって?

リード文

はてなブックマーク - リード文 - n-yujiのテーマ作り日記

「book」テーマを作った特に一番悩んだのは、「ページのヘッダ」の扱いでした。

やっぱり、タイトル直下に、ちょっとした説明の文章(リード文と呼ぶ)を入れたいと思うんですよ。

なのに、これだけが左端付きになってしまって、かっこわるい。結局、「きれいに見せたい人は<div class="footer">と</div>で挟んでね」ということにしたわけですが、あまりエレガントな解決とは申せません。

なにか他にいい方法はないかなあ……。

hatena-bodyって

はてなブックマーク - hatena-bodyって - n-yujiのテーマ作り日記

そこでhatena-bodyなんですけど、これを使えば、MT風ふうにサイドにスペースを取ったデザインが、割と簡単に出来ちゃいますよね。まあ、body全体でサイドにスペース取ればいいって話ではありますけど、hatena-bodyを利用することで、デザインの自由度が上がることは間違いないような気がする。でも、hatena-bodyをデザイン要素に使うと、tDiaryとの互換がぜんぜん効かなくなってしまいますよね。

それに、hatena-bodyを使ってサイドにスペースを取ったとしても、上記の「リード文」は、マージンが取れないから、いまいちきれいに収められないわけです。うーん、どうすれば。

……などと、いろいろ考えて

はてなブックマーク - ……などと、いろいろ考えて - n-yujiのテーマ作り日記

基本的には、

  1. サイドにスペースを取る場合はbody全体で(はてなテーブルヘッダを含めて)。
  2. hatena-bodyは、なるべくデザイン要素としては使用しない。
  3. リード文を入れる場合は<div class="footer">と</div>で挟んでね。

という方針で行くほかないのかなあ。

自分は何か大きな勘違いをしていないかなあ?

リード文に関して

はてなブックマーク - リード文に関して - n-yujiのテーマ作り日記

http://theme.g.hatena.ne.jp/kamioka/20040711

新しいdiv要素を作る案。n-yujiとしては、とにかくリード文は必要だと思うんですよ。ほとんどの人が、タイトル直下に何らかの文章を入れてますから。

かんたんデザイン設定あたりでうまく対応できたりするといいなあ、と思うんですが、どうでしょう?

tDiaryとの互換

はてなブックマーク - tDiaryとの互換 - n-yujiのテーマ作り日記

上でちょっとtDiaryとの互換の話を出しましたが、やっぱりもうtDiaryとの互換までは考えきれないですね。そもそも動作確認をしてないですから。もし、崩れがひどいものがあれば、先方にも迷惑でしょうから、それはtDiaryさんには追加しないというルールにしませんか?>近藤さん

2004-07-06今後の見通し

簡単に、今後の見通しを

はてなブックマーク - 簡単に、今後の見通しを - n-yujiのテーマ作り日記

いい感じのテーマが次々に追加されていますけど、僕はまだ何もしてません。急がなくちゃと思うんですが、まずは情報収集です。

特に、先日の仕様変更は、デザインの自由度に関して、かなり大きな意味があると思うので、そこら辺をしっかり把握しなくては、前へ進めません。

おおよそ理解できてから、ベースとなるCSSを練り上げます。「book」と「hatena」を元にして調整するのがいいかなと考えています。たぶん、ベースを作るまでで7月いっぱいくらいかかるような気がします。

8月になれば、ベースからデザイン展開して順次発表していけるはず。

忙しい夏になりそうです。

そもそも本業も忙しいんですが、無理をしないようにがんばります。

デザインの方向性

はてなブックマーク - デザインの方向性 - n-yujiのテーマ作り日記

とりあえず、女性向け方面を強化したい。

雑誌や書籍の誌面に近い、安定していて見慣れた感じ。

個性を出し過ぎず、長い間見ていても飽きないように。

レイアウト構造はわかりやすく。

変則的な小技は使わない(そうしたいんだけどそうもいかないんですよね~)。

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040706

2004-07-05今日から

今日からテーマ作りに参加

はてなブックマーク - 今日からテーマ作りに参加 - n-yujiのテーマ作り日記

します。

いくつかイメージは浮かんでいるんですけど、うまく実現できるかなあ……。

技術的なところにはあまり強くないので、themeグループの皆さまにはお世話になりそうな気がします。

よろしくお願いしまーす(なんか部活に入った気分)。

kamiokakamioka2004/07/06 06:58bookテーマの方ですよね! よろしくお願いしまーす!

トラックバック - http://theme.g.hatena.ne.jp/n-yuji/20040705