ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

結局宣言通りサイドバーを追放してやりました。

これからのWebサイトは極力サイドバーやヘッダーは無くす方向で」で宣言した通りサイドバーを追放しました。本当はもうちょっと放置しておく予定でしたが、不精の自分には珍しく予定外に素早く行動してしまいました。

前までのデザインはこんな感じ => はてなブログのヘッダーにナビゲーションをつけよう!

公開されているテーマの中から、サイドバーもなく、ヘッダーの主張の弱いテーマを選び、そこからカスタマイズして仕立てました。

フッターをレスポンシブにしました。ウィンドウ幅を狭めるとそれについれて3〜1ペインとなるので試してみてください。

妥協したこと

トップページと記事ページの差別化

ワンカラムのブログにありがちな、トップページの冗長な感じがするため、トップページはできればアーカイブページみたいにしたいのですが、はてなブログではCSSはいじれても出力されるHTMLまではカスタマイズできません。

なのでCSSでなんとかするしかないのですが、トップページと記事ページでは附加されてるクラスに違いがなかったので、CSSオンリーでトップページと記事ページを差別化することはできなかったのでとりあえず現状で妥協してます。

ですが本当はトップページはもっと記事の一覧性の高いデザインにしたいので、そのうちJSとかで無理矢理変えるかもしれません。

ヘッダーの追放

上にも書いたように、はてなブログではHTMLをカスタマイズすることができません。

本当はヘッダの部分をフッターの頭に持って行きたいのですが、CSSだけだと厳し目なので妥協しました。その代わりできるだけ主張を押さえて記事だけに目が行きやすいように工夫しています。

ヘッダのナビも、ナビとしての役割を果たしつつ嫌味のないように仕上げられたかなと思います。

今後の改善点

まずフッターですが、純粋に3列づつを行にして配置しているので、中身の短い列と長い列が混同している行ではかなり隙間が目立ちます。

f:id:lettuce0831:20140320143502p:plain

Masonryあたりでも導入してそのへんをどうにかしようかと思っています。

フッターのCSSの解説

純粋にfloatだけで横並びにすると、列の高さが違う要素が混合した場合にレイアウトの崩れが発生します。

f:id:lettuce0831:20140320142800p:plain

これを防いで、純粋に一行に3列づつ高さを揃えて配置するには以下のようにします。

.hatena-module:nth-child(3n+1) {
  clear: both;
}

この記述で、4つめの要素、7つ目の要素、…といった具合にclear:bothをしてfloatを解除しています。

これは私が選択した元々のテーマにあった記述です。HTMLをいじってrowのdivごとに区分けすることはできないのでCSSでなんとかするしかないので、なるほどなと思いました。

後は、これを参考にしてレスポンシブに対応するために以下のようにしました。

@media screen and (max-width: 960px){
    #box2 #box2-inner {
        width: 768px;
    }
    #box2 .hatena-module:nth-child(3n+1) {
        clear: inherit;
    }
    #box2 .hatena-module:nth-child(2n+1) {
        clear: both;
    }
    #box2 .hatena-module {
        width: 360px;
    }
}

/* iPhone4S */
@media (max-width: 767px){
    #blog-title #blog-title-inner {
        width: 90%;
    }

    
    #box2 #box2-inner {
        width: 400px;
    }
    #box2 .hatena-module:nth-child(3n+1) {
        clear: inherit;
    }
    #box2 .hatena-module:nth-child(2n+1) {
        clear: inherit;
    }
    #box2 .hatena-module {
        width: 400px;
        float: none;
    }
}

ブログカスタマイズに参考になるリンク、書籍