わけあって*1はてなダイアリーの変更可能なテーマ二百弱を全部順番に適用させてみて、んでゴリゴリとキャプってみた。一晩かかるかと思ったらそれ自体は単純作業の繰り返しなのでツールやらを工夫したら３時間くらいで割と意外に楽勝っぽく終了。
ついでに本書のいろんな意味で「キモ」であって、はてな方式と2xUP秘伝の独自方式の２種類を紹介してる「サイドバー」をいろんなテーマで試してみたら、はてなダイアリーキーワード「d:keyword:はてなダイアリーsidebar利用可能テーマ」の記述が古く成っちゃってることに驚いてさうどうしましょう。みたいな。
というのは、サイドバーに対応したテーマがいつの間にかすんごい増えた。たぶんtDiaryテーマの最新を追っかけて入れ替えたときがあったけど、そんときに修正版が入ってきたんじゃないかと推測。あと後発の「はてな発」テーマはデフォルト対応してるのが多いし。
従来の説明だと7テーマでサイドバーをデフォルト使用可
っつーことで順を追って説明。まず、キーワードには、サイドバーが使用可能なテーマとして、次の7つが挙げてある。
■ div.main / div.sidebar が定義されていて並んで表示されるテーマ
はてなダイアリーのテーマの中で、アンテナなどを表示できるsidebarに対応したテーマの一覧です。
- candy
- clover
- cool_ice
- default
- flower
- hatena
- kotatsu
デフォルトでサイドバー利用可能ってどういうテーマ？
しかし、実際に確かめてみたら、もっとたくさんのテーマにデフォルトでsidebarクラスが定義されているっぽい感触であった。
ただし、キーワードキーワード「d:keyword:はてなダイアリーsidebar利用可能テーマ」のTipsにも書かれているけれど、多くのテーマがはてなのヘッダに対応していない。「ヘッダに対応していない」というのは、tDiaryのページには「はてな」のようなヘッダが無いので、そのままだとサイドバーをページの上端から表示しちゃうテーマがある。というかテーマの頭を下げるみたいな工夫をわざわざ施してやんなけりゃデフォルトでそうなる。
しかし、はてなの場合は左右ぶち抜きでヘッダがあるので、サイドバーをページの上端から表示しちゃうと、サイドバーの上部がヘッダに重なっちゃう。これはかなり見苦しくなる。だから、そういうテーマでは、単にサイドバーをつけるだけでなく、スタイルシートを少し追加してサイドバーの位置を下げてあげないといけない。
ということで「はてなダイアリーでデフォルトでサイドバーを利用できるか？」という観点でまとまると、テーマは次の3種類に分類することができる。
- はてなでデフォルト対応なテーマ（sidebarクラス有＋はてなヘッダを考慮済）
- ヘッダのtop位置を要調整なテーマ（sidebarクラス有＋はてなヘッダに未対応）
- サイドバーを表示できない（sidebarクラス無し）
実は55テーマでサイドバーをデフォルト利用化
テーマの分類まで終わったところで、どのテーマがサイドバーに対応しているかをリストにしてみますた。合計55テーマあります。テーマ総数が200弱なので、そのうち55個といえば、四分の１以上で使えるってことですね。ひょっとしたら今まで諦めていたダイアリーでも簡単にサイドバーがつけられれるのかも？ ですね。
それではさっそく見てみましょう。どぞです。けっこう長大です。
- はてなでデフォルト対応なテーマ（sidebarクラス有＋はてなヘッダを考慮済）
- arrow
- bluely
- book
- book2-feminine
- book3-sky
- citrus
- emboss
- hatena
- himawari
- light-blue
- magic
- momonga
- nippon
- old-pavement
- pain
- pettan
- plum
- purple_sun
- rainy-season
- redgrid
- repro
- sepia
- smoking_white
- tile
- yukon
- ヘッダのtop位置を要調整なテーマ（sidebarクラス有＋はてなヘッダに未対応）
- 3minutes
- 3pink
- aoikuruma
- bill
- bistro_menu
- bright-green
- candy
- cat
- clover
- cool_ice
- default
- flower
- germany
- gray2
- kotatsu
- loose-leaf
- marguerite
- matcha
- mono
- moo
- puppy
- s-blue
- sagegreen
- savanna
- scarlet
- simple
- spring
- teacup
- thin
- wine
サイドバーってどうやって付けるの？
サイドバーのつけ方はヘルプに載ってるますが、そのままほぼコピペですが、ついでなので紹介しておきます。
上の1.のテーマを選んだ場合、設定画面で「ヘッダ」と「フッタ」にちょっと書いてやるだけです。「ページのヘッダ」はこんな感じになります。
<div class="main">
んで、ページのフッタはこうなります。hatenaタグで指定するモジュールは好みに合わせてどうぞ。
</div> <div class="sidebar"> <hatena name="calendar2"> <hatena name="section"> </div>
サイドバーがヘッダと重なる場合はスタイルシートで微調整
さらに、2.のテーマでは前述のように、はてなヘッダとサイドバーが重なるという不具合がある。これを回避するには、「スタイルシート」欄に次のCSSを追加するとよいようです*2。高さ位置は好みに合わせて調整してください。
div.sidebar {
position: absolute;
top: 120px;
}
最後に
ということでした。以上です。編集長。キーワードを書き換えるべきかもしんないけど、とりあえずココに書いとくます。参考になったのは*3以下のサイト。簡単にサイドバーの具合が試せます。
