IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / はてなブログテーマ開発(4)ブログの基本構造を作る

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

2018/08/22 CSS, SASS, はてなテーマ, はてなブログ

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

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

はてなブログテーマ開発(1)
はてなブログテーマ開発(2)
はてなブログテーマ開発(3)

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

ブログの基本構造

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

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

Boilerolate のデフォルトは、デバイスの解像度 767px以下で1カルム、768px以上から2カラムになり、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とし、それ以上は2カラム
  • 本文の表示幅は、最大 660px の可変
  • 2カラムのサイドバーの表示幅は、最大 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 を1カラムにしたい場合は、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;
    }
}


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

デモ画像

iPhone6/7/8

iPad

デスクトップ(ビューポート 1275px)

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

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

ThinkPad E430 の HDD を SSD に換装
はてなブログテーマ開発(5)ブログタイトル、記事タイトルの装飾
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/02/1

WordPress:期間指定で人気記事を表示(プラグインなし)

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress60
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com