読者です 読者をやめる 読者になる 読者になる

彼女からは、おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

はてなダイアリーの公式テーマ「4chairs-lime」にひと手間加えてみた(1) - 画面下部に吹っ飛んでしまったサイドバーをあるべき場所に戻す

ついこの間、「はてなダイアリーの公開デザイン「はてブ2」のスタイルシートを編集してみた」を書いたばかりなのですが、秋の夜長にちょっと気分転換ということで、ブログのデザインを変えてみました。


はてなダイアリーの公式テーマ一覧を物色して、「4chairs-lime」というナイスなテーマを見つけたので拝借。あとは少しだけ自分好みに手を加えてみたりして。

Before & After

ブログのデザイン変更前は次のような感じです。前述のエントリーにあるように、公開デザインはてブ2」を編集したものを使っていました。





「4chairs-lime」テーマを適用した直後は次のような感じ。もちろんこのままでも結構イケてると思うんですけどね。





「4chairs-lime」を編集した後は次のような感じ。



まァ、好みもありますから、一概に良くなったとは限りません。


特に画面両端をグレーにしたのは賛否両論でしょうか。個人的には、引き締まって良くなったと感じておりますが。

手を加えた項目一覧

結局「4chairs-lime」に手を加えた項目は次のとおりです。ただ、全部説明しようとすると、ちょっとボリュームが大きすぎるので、今回は一番上の項目についてのみ書いて、残りは次回以降に回そうかと思います。

  • 画面下部に吹っ飛んでしまったサイドバーをあるべき場所に戻す(今回はこの項目の説明だけ)
  • サイドバーの「最新タイトル」(section モジュール)を見やすくする
  • 画面両端をグレーにして引き締める
  • その他、細部にこだわってみる - 神様は細部に宿る

画面下部に吹っ飛んでしまったサイドバーをあるべき場所に戻す

テーマを変えてみて、まず最初に気づいたのは、「ん?サイドバーが消えた...?」ということ。よく見てみたら、画面下部に吹っ飛んでいました。


ちょっと調べてみたらビンゴの記事が見つかったので、それをもとに「ページのフッタ」を修正。

修正前の「ページのフッタ」
<div class="main">
    <div style="clear:both;" class="curvebox-header">
        <div></div>
    </div>
    <div class="curvebox-body">
修正後の「ページのフッタ」
<div class="main">
    <div style="clear:both;" class="curvebox-header"></div>
    <div class="curvebox-body"></div>


要は、最後に

</div>

を加えて、あとは体裁を少し整えただけなのですが、サイドバーが無事にあるべき場所に戻ってきました。めでたし、めでたし。


とりあえず、今回のエントリーではここまで。手を加えた項目の残りについては、また次回以降ということで。


ではでは。