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

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

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

• ブログの基本構造
  • Boilerplate から基本構造部分を削除
  • ブレイクポイントひとつの基本構造設計
• デモ画像
  • iPhone6/7/8
  • iPad
  • デスクトップ（ビューポート 1275px）

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;
    }
}


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

02デモ画像

iPhone6/7/8

iPad

デスクトップ（ビューポート 1275px）

1095px からは両サイドのパディングが変化するだけです。

次回は、ブログタイトルの背景に画像を貼ることとフォントサイズをいろいろ試してみる予定です。