はてなダイアリーsidebar利用可能テーマ

div.main / div.sidebar が定義されていて並んで表示されるテーマ

はてなダイアリーのテーマの中で、アンテナなどを表示できるsidebarに対応したテーマの一覧です。（2004/08/04調べ）

• 「かんたんデザイン設定」or「詳細デザイン設定 > テーマ」
  • Hatena
  • city
  • delta
  • pearl
  • Mirage
    • Kasumi
    • Utsusemi
    • Choochoo
  • Soda
    • Cassis
    • Green-tea
    • Menu
  • Wall1
    • Wall2
    • Wall3
    • Wall4
    • Wall5_tatami
  • chiffon_leafgreen
    • chiffon_pink
    • chiffon_skyblue
  • Hazakura
    • Navy
    • Kurenai
  • Pict
  • Query000
    • Query011
    • Query101
    • Query110
    • Query111or
  • Memo
    • Memo2
  • Kitchen-natural
  • 90
  • town
  • pokke-blue
    • pokke-orange

• 「詳細デザイン設定 > テーマ」
  • 3minutes
  • 3pink
  • aoikuruma
  • arrow
  • bill
  • bistro_menu
  • bluely
  • book
  • book2-feminine
  • book3-sky
  • bright-green
  • britannian
  • candy
  • cat
  • citrus
  • clover
  • cool_ice
  • default
  • emboss
  • flower
  • germany
  • gray
  • hatena
  • himawari
  • kotatsu
  • light-blue
  • loose-leaf
  • magic
  • marguerite
  • matcha
  • momonga
  • mono
  • moo
  • nippon
  • old-pavement
  • pain
  • pettan
  • plum
  • puppy
  • purple_sun
  • rainy-season
  • redgrid
  • repro
  • rim-mizuiro
  • s-blue
  • sagegreen
  • savanna
  • scarlet
  • sepia
  • simple
  • smoking_gray
  • smoking_white
  • spring
  • teacup
  • thin
  • tile
  • wine
  • yukon

Tips

2004年7月1日からはてなダイアリーの出力ソースに div.hatena-body が加えられたことにより、以下のような補正は必要なくなりました。(参照：id:hatenadiary:20040702#1088727985)

多くのテーマが、はてなのヘッダに対応していませんので、

div.sidebar {
	position: absolute;
	top: 120px;
}

といった追加の指定をスタイルシート内に行い、sidebarの上位置を下にずらす必要があります。

sidebar に未対応のテーマの場合

スタイルシート欄に以下のような指定を行い div.main / div.sidebar クラスの定義を行います。

hatenaテーマと同様の設定にする場合

div.main {
	margin-left: 18%;
}
div.sidebar {
	position: absolute;
	left: 0px;
	width: 15%;
	margin-left: 5%;
}

関連キーワード

• keyword:sidebar…表示位置（左、右、左右、上）に関するCSS Tipsなどがまとめてあります。

逆に右側にカレンダーなどを表示したいときは以下をスタイルシートにコピー．

div.main {
	margin-right: 18%;
}
div.sidebar {
	position: absolute;
	right: 0px;
	width: 15%;
	margin-right: 5%;
}



div.sidebar {
	position: absolute;
	top: 120px;
}

}