【はてなブログ】テーマ作成 02：スタイルシート（CSS）を作成する

手順

01：制作環境を作る
02：スタイルシート（CSS）を作成する ＜＝今回
03：確認用の記事を用意する
04：作成・確認ポイント
05：90日未更新時の広告表示対応

はてなブログのテーマ作成は、「スタイルシート（CSS）を作成」がほぼすべてです。

空のテーマでの表示

中身が空のデーマで表示するとこんな感じになります。ここから、作成していくことも可能です。

書いておくと楽

*, :after, :before {
  box-sizing: border-box;
}

外枠（レイアウト）を作る

レイアウトから作ると作りやすいと個人的には思います。レスポンシブなら、この時点である程度の動作確認をしておくとよいとも思います。

#wrapper {
  width: calc(100% - 310px);
  float: left;
  padding-right: 10px;
  box-sizing: border-box;

  border: solid 1px #000;
}

#box2 {
  float: left;
  width: 310px;
  border-top: none;
  margin-top: 0;

  border: solid 1px #000;
}

こんな感じのものを追記すると２カラムレイアウトになります。「border: solid 1px #000;」は、枠がわかりやすいように書いてます。

横幅の最大値を設定する

#blog-title-inner,
#blog-title-content,
#top-editarea,
#top-box,
#content,
#bottom-editarea,
#footer-inner
{
  max-width: 1024px;
  margin: auto auto;
}

横幅の最大値を設定すると、よいと思います。

レスポンシブにする

@media (min-width: 900px){
  #wrapper {
    width: calc(100% - 310px);
    float: left;
    padding-right: 10px;
    box-sizing: border-box;

    border: solid 1px #000;
  }

  #box2 {
    float: left;
    width: 310px;
    border-top: none;
    margin-top: 0;

    border: solid 1px #000;
  }
}

「外枠（レイアウト）を作る」のところスタイル（CSS）を上記のようにすると、

900px未満：1カラム
900px以上：2カラム

という具合になるかと思います。

それ以降

・ヘッダー（タイトル）の装飾
・記事ページ装飾
・アーカイブページの装飾
・サイドバーの装飾
・フッターの装飾

補足

・Releases · hatena/Hatena-Blog-Theme-Boilerplate
「boilerplate.css」をみればわかりますが、「normalize.css」が先頭部分に組み込まれてます。これを組み込んだほうが良いです。

参考：
[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス