CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
