サイドバーを持つキーワード

サイドバーを持つキーワード

キーワードってサイドバーが書けるのかの実験です(考えてもよくわからなかったので)。

まず本文中に単純に

><div class="sidebar">サイドバーですよ</div><

と書くと、

Hatenaテーマではdiv.hatena-bodyの左上に表示されてadsence広告にかぶる。サイドバーの中身を足していくと、div.dayの内容にかぶってしまう。キーワード画面はdiv.mainの構造がないからですね。

><div class="main">ここはdiv.main</div><

ということにするとどうなるのか。

ここはdiv.main

そうか、ただdiv.sectionの中でmargin-leftが効くだけですね。

では、div.hatena-bodyまでの構造をすべて閉じて、div.mainとdiv.sidebarを展開します。

div.main,div.main,div.main

できました、サイドバー状態になります。うーん、はてなダイアリーモバイル画面だとどうなるのかな。タグは無視されて文章の順に並ぶのでしょうか。

とりあえずサイドバーっぽくして遊びたいと思います。

></div><!--div.section閉じる-->
  </div><!--div.body閉じる-->
 </div><!--div.day閉じる-->
</div><!--div.hatena-body閉じる-->
<div class="hatena-body">
 <div class="main">
  <div class="day">
   <div class="body">
    <div class="section">
〜div.mainの内容〜
    </div>
   </div>
  </div>
 </div>
 <div class="sidebar">〜div.sidebarの内容〜</div>
</div>
<div class="hatena-body">
 <div class="day">
  <div class="body">
   <div class="section"><

のようにしています。(Pタグ自動挿入停止のため最初の行頭は空白を作らず『><』から)

これで例えばはてなダイアリーガイドとか、写真日記みたいなシリーズがたくさんあるキーワードの目次を作って表示させると、移動に便利だったり単に面白かったりするかなあと思ったのですが、編集しにくいのでダイアリーでは怒られるかも。

今更&使えない実験すみません。

グループは管理者がサイト共通のヘッダ、フッタとスタイルシートが書けるので、もうちょっと自由に出来ますね。