はてなブログテーマ開発（4）ブログの基本構造を作る

2018.08.22 はてなブログ, テーマ

はてなブログテーマ開発（4）ブログの基本構造を作る

はてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の４回目です。前回で自動リロードの環境も整いましたので、実際に scssファイルに手を加えていきます。

はてなブログテーマ開発（1）
はてなブログテーマ開発（2）
はてなブログテーマ開発（3）

ブログの基本構造
- Boilerplate から基本構造部分を削除
- ブレイクポイントひとつの基本構造設計
デモ画像

01ブログの基本構造

手を加えていくファイルは、\scss\lib\_core.scss です。ざっと流してみれば分かる通り、30行目あたりまでは全体のフォントや背景色、リンク、見出しタグのサイズや色指定があり、31行目から172行目までは基本構造の設定、それ以降は記事、コメント、サイドバー（各モジュール）などの設定が545行まであります。

まず、基本構造を決めます。

Boilerolate のデフォルトは、デバイスの解像度 767px以下で１カルム、768px以上から２カラムになり、991pxまでは表示幅 720px（本文 480px + 間隔 40px + サイドバー 200px）の固定、992px以上からは表示幅 940px（600px + 40px + 300px）に変わります。

これで特に問題はないのですが、以前、「（はてな）ブログのブレイクポイントはひとつでいいのではないかという話」という記事を書いたことがあり、今回それを使ってみるとどうなるかやってみようと思います。

Boilerplate から基本構造部分を削除

_core.scss から、以下の31行目から172行目までを削除してしまいます。

----- ここから削除 ---------------
/* ヘッダ（グローバルヘッダ）
  グローバルヘッダの中はiframeですが、
  #globalheader-container に背景色や文字色を指定することでiframeの中にも色が反映されます。
*/
#globalheader-container {
    background-color: $text;
    color: $background;
}


（略）


/* ヘッダ画像を設定したとき */
.header-image-enable {
    #blog-title {
        margin: 0 0 2em;
    }
    #blog-title-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    #blog-title-content {
        margin-left: 10px;
        margin-right: 10px;
    }
}
----- ここまで削除 ---------------

ブレイクポイントひとつの基本構造設計

基本構造の仕様を次の通りとします。

ブレイクポイント 768pxとし、それ以上は２カラム
本文の表示幅は、最大 660px の可変
２カラムのサイドバーの表示幅は、最大 300px の可変

まず、_variable.scss を変更します。

以下を追加
$break-point: 768px;
$content-width: 660px;
$sidebar-width: 300px;
$min-width: 320px;
$max-width: $content-width + 40 + $sidebar-width;
$mq-bp: "(min-width: " + $break-point + ")";


以下をコメントアウト
//$mq-xs: "(max-width: 480px)";
//$mq-sm: "(min-width: 768px)";
//$mq-md: "(min-width: 992px)";
//$mq-lg: "(min-width: 1200px)";

変数が使えますので、たとえばブレイクポイントを変えたい場合は、768px を変更するだけでどうなるか確認できます。たとえば、iPad を１カラムにしたい場合は、769px以上にするだけです。

_core.css の削除した場所に次を追加します。

後々、ブログタイトルの背景に画像を貼りますが、公式のカスタマイズに用意されている「タイトル画像 > 画像をアップロード」は使用せず、#blog-title の背景に画像を貼る予定の設定です。

/* 基本構造 */


#content,
#blog-title-inner {
    padding: 0 calc((100vw - #{$min-width}) * 0.1 + 13px);
    @media #{$mq-bp} {
        padding: 0 calc((100vw - #{$break-point}) * 0.1 + 13px);
    }
}


#content-inner,
#blog-title-content {
    max-width: $content-width;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    @media #{$mq-bp} {
        max-width: $max-width;
    }
}


#blog-title-content {
    justify-content: center;
    height: 200px;
}


#content-inner {
    justify-content: space-between;
    @media #{$mq-bp} {
        flex-direction: row;
    }
}


#wrapper {
    width: 100%;
    @media #{$mq-bp} {
        max-width: $content-width;
        width: 100% * $content-width / $max-width;
    }
}




#box2 {
    width: 100%;
    @media #{$mq-bp} {
        max-width: $sidebar-width;
        width: 100% * $sidebar-width / $max-width;
    }
}


/* 基本構造ここまで */