はてなブログのテーマづくり　1カラムレイアウトにする

自分用のテーマを作ってみてテーマづくりがとても楽しかったので、ほかの人にも使ってもらえるようなテーマを作ろうと模索中です。

1カラムレイアウトにしてみる

公開するかどうかはわかりませんが、テーマづくりを進めていく履歴をメモ書きとして残しておこうと思います。

もちろん素人なので１からテーマを作るのは難しいので、サンプルテーマ「Boilerplate」を使ってテーマを作っていきます。

今日はレイアウトをどうしようかな？と考えてみました。

1カラムレイアウトにしてみる

最近1カラムレイアウトのテーマが流行っているのでしょうか？

1カラムのブログをお見かけすることも多くなってきました。

わたしも、普段他の方のブログを読むときは、スマホやタブレットを利用することが多いので、そうなると1カラムが便利かもしれません。

ということで、今回は1カラムレイアウトに挑戦してみようと思います。

サンプルテーマ「Boilerplate」のカラムレイアウトをまずは見てみましょう。

501行目あたりから

/* container */
#container,
#footer {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 768px) {
    #container,
    #footer {
        width: 720px;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    #container,
    #footer {
        width: 940px;
    }
}

/* 2カラムレイアウト */
#content-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

@media (min-width: 768px) {
    #content-inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

@media (min-width: 768px) {
    #wrapper {
        width: 480px;
    }
}

@media (min-width: 992px) {
    #wrapper {
        width: 600px;
    }
}

@media (min-width: 768px) {
    #box2 {
        width: 200px;
    }
}

@media (min-width: 992px) {
    #box2 {
        width: 300px;
    }
}

/* 下記のスタイルを適用するとテーマを1カラムレイアウトにできます。
利用するにはコメントアウトを解除してください。
（2カラムレイアウトの場合はコメントアウト全体が不要です）

#content-inner {
    flex-direction: column;
    align-items: center;
}
#wrapper {
    @media (min-width: 768px) {
        width: 100%;
    }
    @media (min-width: 992px) {
        max-width: 720px;
    }
}
#box2 {
    width: 100%;
    @media (min-width: 768px) {
        width: 100%;
    }
    @media (min-width: 992px) {
        width: 100%;
    }
}

#box2-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    @media (min-width: 768px) {
        margin-left: -20px;
        flex-direction: row;
    }
    @media (min-width: 992px) {
        margin-left: -30px;
    }
}
.hatena-module {
    width: 100%;
    @media (min-width: 768px) {
        width: 33.3333%;
    }
    @media (min-width: 992px) {
        padding-left: 30px;
    }
}

---- END 1カラム */

まず、#containerと#footerの幅の指定が書かれていて、その後に2カラムレイアウト、そして、1カラムレイアウトの記述があります。

1カラムレイアウトのところをコメントアウトするだけで1カラムレイアウトになるはずなのですが、、、

、、、

なりません（涙）

@mediaの入れ子の入れ方が逆なのではないかな？と思います。

576行目当たりから少し修正を入れてみます。

修正後

#content-inner {
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    #wrapper {
        width: 100%;
    }    
}
@media (min-width: 992px) {
    #wrapper {
        max-width: 720px;
    }    
}

@media (min-width: 768px) {
    #box2 {
        width: 100%;
    }
}

#box2-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    #box2-inner {
        margin-left: -20px;
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    #box2-inner {
        margin-left: -30px;
    }
}

.hatena-module {
    width: 100%;
}
@media (min-width: 768px) {        
    .hatena-module {
        width: 33.3333%;
        padding-left: 30px;
    }
}

修正ついでに、

1カラムレイアウトだと、本文は1カラム、サイドバー部分がカラム落ちしてはヘッダーの上に3列で並ぶのですが、タブレットで見たときに少し窮屈だったので、タブレットには2列で並ぶように変更しました。

611行目当たりのこの部分を

.hatena-module {
    width: 100%;
    @media (min-width: 768px) {
        width: 33.3333%;
    }
    @media (min-width: 992px) {
        padding-left: 30px;
    }
}

@media (min-width: 768px) {        
    .hatena-module {
        width: 50%;
        padding-left: 15px;
    }
}
@media (min-width: 992px) {
    .hatena-module {
        width: 33.3333%;
        padding-left: 30px;
    }
}