スマートフォン用の表示で見る

はてな

はてなダイアリー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
  • 詳細デザイン設定 > テーマ」
    • 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;
}

}