タグ

ブックマーク / tikeda.hatenablog.com (7)

  • 見出しにマウスが乗ったときカーソルを変える - tikeda's blog

    その場編集時に切り替わる見出しの背景色の変更が可能になりました - はてなダイアリー日記 昨日、その場編集機能で記事タイトルにマウスを乗せた時に色を変えたりする事ができるようになりました。試しに背景色を変えずにマウスのカーソルを に変える(FirefoxとIEだけかな?)デザインを作ってみたので気に入った方は使ってみてください。以下のコードを「詳細デザイン」のスタイル欄に入れてください。今この日記でも適応してみています。 h3.hover { background:transparent; cursor:url("http://tikeda.g.hatena.ne.jp/files/tikeda/07194d36bce2ba44.gif") ,text; cursor:url("http://tikeda.g.hatena.ne.jp/files/tikeda/3a4401483c4325

  • メイリオのこれ治らないかな - tikeda's blog

    斜体がない 下線が変 anchorの下線がpadding-bottomの下に付く? anchorの中の画像にvertical-align:middle;書くと下線もmiddleにきて打ち消し線みたいなる アンチエリアスかからないブラウザで見ると汚い(仕方ないか) デフォルトフォントなんだから治って欲しいなと思った事です。

    メイリオのこれ治らないかな - tikeda's blog
  • 汎用CSS - tikeda's blog

    先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用(.table-list)」「管理画

    汎用CSS - tikeda's blog
  • 効率よく育てやすくデザインする - tikeda's blog

    デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに(ダイアリーだと「日記を書く」、人力だと「質問と回答」)。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh

    効率よく育てやすくデザインする - tikeda's blog
  • 角丸ライブラリ - tikeda::Diary:

    最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01:小さ目な角丸 02:大き目な角丸 03:斜線の角丸(背景画像をループ) 04:ストライプの角丸(背景画像をループ) 05:木模様の角丸(背景画像をループ) 06:リボンのついた角丸(背景画像を固定) 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu

    角丸ライブラリ - tikeda::Diary:
  • tikeda::Diary - はてなワンワンワールドに召喚獣

    先ほどから、はてなワンワンワールドで恐竜が現れるパニックがおこってます。 恵比寿で 巣鴨で 福岡で 沖縄で という事で出現した恐竜の全体像はこんな感じ。最初はティラノサウルスをイメージして描いていたのですが、途中から自分の想像上の怪獣になってしまってます。次は何が登場するかはお楽しみ。(まさか、会社で恐竜描くとは夢にも思わなかった。でも、こういうのドット絵も描ける自分を発見できてよかった。) 追記:強化型火を噴く召還獣 芸がない恐竜だったので夜にパワーアップして、さらなるパニックが渋谷の街を襲ったそうな。

    tikeda::Diary - はてなワンワンワールドに召喚獣
  • テーマとZen Garden - tikeda's blog

    同じHTMLファイルで、ユーザーがCSSだけをカスタマイズしてどれだけ視覚的に美しいデザインができるかを楽しむcss Zen Gardenというサイトがありますがはてなダイアリーのテーマもこれと似てます。 はてなダイアリーのテーマもHTMLを触らず、CSSをカスタマイズしてテーマをデザインしていくのですが、さらに高度なのは、HTMLの構造だけが決まっており、コンテンツ(日記の中身)を作るのは各ユーザー。さらに1ページのみならず、編集画面やコメントページとCSSは複数ページにまたがっているからです。 CSSの練習にもなりますし、Zen Gardenのように美しさに特化したカスタマイズも楽しめます。さらには、そのまま自分の日記のデザインに使えます! 是非、興味のある方ははてなテーマで楽しんでみてください。 Zen Gardenのが最近出たようでついつい購入。。 Zen of CSS Desi

    テーマとZen Garden - tikeda's blog
    popup-desktop
    popup-desktop 2005/04/21
    はてなを使った「css Zen Garden」的なサイトがあると面白いかも。
  • 1