monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

はてなブログのテーマづくり 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;
    }
}

768px以上992px未満でサイドーバー部分を2列、992px以上でサイドバー部分を3列にしました。

flexboxでレイアウトされているので768px以上の.hatena-modulewidth: 50%;と書くだけで2列になります。

わたしをいつも悩ませるflexboxですが、こういう時はとっても便利ですね。

雑感:カメの歩みぐらいしか進みませんが、時間はたっぷりあるのでゆっくりとやっていきたいと思います。

参考:@media - CSS: カスケーディングスタイルシート | MDN

@media アットルールは、コードの最上位に配置したり、他の条件付きグループアットルールの中に入れ子にして配置したりすることができます。