kyabana's blog

ユルいめのブログ

はてなブログのidとかclassとか

はてなブログ

はてなブログで「デザインテーマコンテスト」が開催されています！
オリジナルデザインを投稿してAmazonギフト券を当てよう！ 「はてなブログ デザインテーマコンテスト」開催 - はてなブログ開発ブログ

使われている"id"や"class"がわかっていると
デザインしやすいのでザックリさらってみました。
おおよそこんな感じ。

body（トップページで.page-index、記事ページで.page-entryが追加）
div#globalheader-container
iframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）
div#container
div#container-inner
header#blog-title
div#blog-title-inner（タイトル画像）
h1#title（ブログ名）
h2#blog-description（ブログの説明）
div#top-editarea（ヘッダ[ブログタイトルの下]）
div#content
div#content-inner
div#wrapper
div#main
div#main-inner
article.entry
div.entry-inner
header.entry-header
div.date（日付）
h1.entry-title（記事タイトル）
div.categories（カテゴリ）
div.entry-header-menu（編集）
div.entry-content（記事本文）
footer.entry-footer
p.entry-footer-section（タイムスタンプ）
div.hatena-star-container（はてなスター）
div.comment-box（コメント）
div#google_afc_user（広告）
div.customized-footer
div.social-buttons（シェアボタン）
div.pager（ページャー）
aside#box2（サイドバー）
div#box2-inner
div.hatena-module
div#bottom-editarea（フッタ[ページ下部]）
※トップページと記事ページのおおよその構成です。"id"・"class"を網羅しているわけではありません。2013.04.04現在の構成。

記事の幅を可変、サイドバーの幅を固定にした2カラム

#content-inner {
  zoom: 1;
}
#content-inner:after {
  content: '';
  display: block;
  clear: both;
}
#wrapper {
  float: left;
  width: 100%;
  margin-right: -320px; /* (サイドバーの幅 + 記事とサイドバーの間隔 ) × (-1) */
}
#wrapper #main {
  margin-right: 320px; /* サイドバーの幅 + 記事とサイドバーの間隔  */
}
#box2 {
  float: right;
  width: 300px; /* サイドバーの幅 */
}

のようにcssを書くと

body（トップページで.page-index、記事ページで.page-entryが追加）
div#globalheader-container
iframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）
div#container
div#container-inner
header#blog-title
div#blog-title-inner（タイトル画像）
h1#title（ブログ名）
h2#blog-description（ブログの説明）
div#top-editarea（ヘッダ[ブログタイトルの下]）
div#content
div#content-inner
div#wrapper
div#main
div#main-inner
article.entry
div.entry-inner
header.entry-header
div.date（日付）
h1.entry-title（記事タイトル）
div.categories（カテゴリ）
div.entry-header-menu（編集）
div.entry-content（記事本文）
footer.entry-footer
p.entry-footer-section（タイムスタンプ）
div.hatena-star-container（はてなスター）
div.comment-box（コメント）
div#google_afc_user（広告）
div.customized-footer
div.social-buttons（シェアボタン）
div.pager（ページャー）
aside#box2（サイドバー）
div#box2-inner
div.hatena-module
div#bottom-editarea（フッタ[ページ下部]）
のようになります。
ブラウザのウィンドウ幅に合わせて記事の横幅が変わるレイアウト。

ヘッダとフッタ以外を固定幅にした2カラム

#container {
  width:770px; /* 記事の幅 + サイドバーの幅 + 記事とサイドバーの間隔  */
  margin:0 auto;
}
#content-inner {
  zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
#wrapper {
  float: left;
  width: 500px; /* 記事の幅 */
}
#box2 {
  float: right;
  width: 250px; /* サイドバーの幅 */
}

のようにcssを書くと

body（トップページで.page-index、記事ページで.page-entryが追加）
div#globalheader-container
iframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）
div#container
div#container-inner
header#blog-title
div#blog-title-inner（タイトル画像）
h1#title（ブログ名）
h2#blog-description（ブログの説明）
div#top-editarea（ヘッダ[ブログタイトルの下]）
div#content
div#content-inner
div#wrapper
div#main
div#main-inner
article.entry
div.entry-inner
header.entry-header
div.date（日付）
h1.entry-title（記事タイトル）
div.categories（カテゴリ）
div.entry-header-menu（編集）
div.entry-content（記事本文）
footer.entry-footer
p.entry-footer-section（タイムスタンプ）
div.hatena-star-container（はてなスター）
div.comment-box（コメント）
div#google_afc_user（広告）
div.customized-footer
div.social-buttons（シェアボタン）
div.pager（ページャー）
aside#box2（サイドバー）
div#box2-inner
div.hatena-module
div#bottom-editarea（フッタ[ページ下部]）
のようになります。
ウィンドウ幅に関係なくブログの幅が固定のレイアウト。

記事とサイドバー以外を可変にした2カラム

#content {
  width:770px; /* 記事の幅 + サイドバーの幅 + 記事とサイドバーの間隔  */
  margin:0 auto;
}
#content-inner {
  zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
#wrapper {
  float: left;
  width: 500px; /* 記事の幅 */
}
#box2 {
  float: right;
  width: 250px; /* サイドバーの幅 */
}

のようにcssを書くと

body（トップページで.page-index、記事ページで.page-entryが追加）
div#globalheader-container
iframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）
div#container
div#container-inner
header#blog-title
div#blog-title-inner（タイトル画像）
h1#title（ブログ名）
h2#blog-description（ブログの説明）
div#top-editarea（ヘッダ[ブログタイトルの下]）
div#content
div#content-inner
div#wrapper
div#main
div#main-inner
article.entry
div.entry-inner
header.entry-header
div.date（日付）
h1.entry-title（記事タイトル）
div.categories（カテゴリ）
div.entry-header-menu（編集）
div.entry-content（記事本文）
footer.entry-footer
p.entry-footer-section（タイムスタンプ）
div.hatena-star-container（はてなスター）
div.comment-box（コメント）
div#google_afc_user（広告）
div.customized-footer
div.social-buttons（シェアボタン）
div.pager（ページャー）
aside#box2（サイドバー）
div#box2-inner
div.hatena-module
div#bottom-editarea（フッタ[ページ下部]）
のようになります。
記事とサイドバーの幅は固定だけどタイトルがウィンドウの両端まで伸びているレイアウト。

などなど。


「はてなブログテーマ制作の手引き」やサンプルCSS「Boilerplate」と照らし合わせつつテーマのデザインをすると思い通りのものがつくれそう。