【はてなブログのテーマ作成】02:スタイルシート(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;
}

こんな感じのものを追記すると2カラムレイアウトになります。「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 | コリス

スポンサーリンク
コメント一覧
  • 名前:管理人 :

    コメントは、まだありません。