Hatena::Groupcss

#DocSeri { style: boxtile; } このページをアンテナに追加 RSSフィード

2006-02-28

ダイアリーのデザイン手法(3):サイドバーのスタイル 14:30 ダイアリーのデザイン手法(3):サイドバーのスタイル - #DocSeri { style: boxtile; } を含むブックマーク はてなブックマーク - ダイアリーのデザイン手法(3):サイドバーのスタイル - #DocSeri { style: boxtile; } ダイアリーのデザイン手法(3):サイドバーのスタイル - #DocSeri { style: boxtile; } のブックマークコメント

はじめに、かんたんデザイン設定などで作られたサイドバーの基本的な構造を以下に示す。

  • div.sidebar(サイドバー全体の枠)
    • div.hatena-module(各モジュールごとの枠)
      • div.hatena-moduletitle(モジュールのタイトル)
      • div.hatena-modulebody(モジュール本体を格納する枠)

div.hatena-modulebodyの中にはそれぞれのモジュールによって違う中身が入る。

サイドバーに独自に要素を追加したい場合は、上記の構造を利用するとデザインが統一できる。

各モジュールの設定

枠部分のデザインは特にdiv.mainと変わるところはないと思うので割愛するとして、モジュールの構造分析に移る。

殆どのモジュールは番号無しリスト表示を利用した構造になっており、クラス名を除いてほぼ同じ構造となっているので、まとめて表にした。

モジュール名クラス名
アンテナモジュールhatena-antenna
リンク集モジュールhatena-urllist
トラックバック/コメントモジュールhatena-recentcomment
カテゴリーモジュールhatena-sectioncategory
最新タイトルhatena-section
RSSモジュールhatena-rss

これらは以下のような共通構造を持っている。

  • ul.クラス名(リスト外枠)
    • li(各項目)
      • a(リンク)

それ以外のモジュール構造は以下の通りである。

最新の画像
  • ul.hatena-photo(画像表示リスト枠)
    • li(各項目)
      • a(リンク)
        • img.hatena-photo(画像)

リスト構造は同様だがクラス名を持つimgが含まれるので別掲載とした。

pvモジュール
  • span.hatena-counter(数字)

唯一のinline要素モジュール。

日記の検索
  • form.hatena-searchform(検索キーワード送信フォーム)
    • input(文字入力欄)
    • input(「検索」ボタン)

検索窓。殆どの場合弄る必要はないと思う。

カレンダー
  • table.calendar(カレンダー全体の枠)
    • tr(表示月ナヴィゲーション部)
      • td.calendar-prev-month(先月)
      • td.calendar-current-month(今月)
      • td.calendar-next-month(次月)
    • tr(曜日表示部)
      • td.calendar-sunday(日曜)
      • td.calendar-weekday(平日)
      • td.calendar-saturday(土曜)
    • tr(日付表示部)
      • td.calendar-day(日付)
        • a(日記が書かれている場合のリンク)
          • (img)(calendar2photo使用時、日記に掲載した画像のサムネイル)

最も複雑な構造とクラスを持つカレンダーモジュール。

トラックバック - http://css.g.hatena.ne.jp/DocSeri/20060228