Bootstrapテーマなんて使わずに対応

レスポンシブデザインなんて知るかコノヤローと思っていたが、モバイルフレンドリーなウェブデザインがSEO的に良いらしく、最近レスポンシブデザインが増えてきている。一方、Nibbleblogの初期テーマの一つであるGoogleSimpleを現在利用しているが、このテーマはレスポンシブデザインに完全には対応していない。しかし、今更このテーマからBootstrapテーマ系のテーマへ変更するつもりはない。かと言って、このテーマをゴリゴリに弄るのは面倒。そこで、このテーマのCSSだけ弄って、なんちゃってレスポンシブデザインにしてみた。

コードの修正内容

元の/themes/google_simple/css/main.cssは以下のとおりで、CSSでサイドバーを右に回り込ませている。

/*
========================================================================
BLOG :: Main
========================================================================
*/

#main {
    margin: 0 auto;
    overflow: auto;
}

#left {
    font-size: 1.32em;
    margin-right: 260px;
}

#sidebar {
    float: right;
    margin-right: 10px;
    width: 220px;
    font-size: 1.2em;
}

これを、以下のとおり画面表示幅が800px以下になったとき、サイドバーが右に回り込まないようにするとともに、メインコンテンツの位置とサイドバーの位置関係をcolumn-reverseで上下反転させただけ。いわゆるブレークポイントを800pxにしたのは、所有しているドコモ dtab d-01Gの画面が800×1280ピクセルだったから。つまり、俺フレンドリーなウェブデザイン。

/*
========================================================================
BLOG :: Main
========================================================================
*/

#main {
    margin: 0 auto;
    overflow: auto;
}

#left {
    font-size: 1.32em;
}

#sidebar {
    font-size: 1.2em;
}

/* 画面表示幅が801px以上の場合の挙動 */
@media all and (min-width: 801px) {
#left {
    margin-right: 260px;
}
#sidebar {
    float: right;
    margin-right: 10px;
    width: 220px;
}
}

/* 画面表示幅が800px以下の場合の挙動 */
@media all and (max-width: 800px) {
#main {
    display: flex;
    flex-direction: column-reverse;
}
}

備考

「ヘッダーを画像に置換してみた」で加えたmin-widthプロパティは、あらかじめすべて削除したので念のため。