s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

はてなブログで使われているdivのセレクタ(idやclass)を確認して全体を視認する

オリジナルテーマ作成に向けて全体図を視認する

もっとわかりやすく<div>タグで作られている「コンテナ」を視認するために作ってみました。全体像を把握しているとデザインがし易いので、0からサイトを作る時はこのような設計図を作っておくと便利です。

はてなブログの構成

body [トップページ .page-index 記事ページ .page-entry]
div#globalheader-container
iframe#globalheader
div#container
div#container-inner
header#blog-title
div#blog-title-inner [タイトル画像]
div#blog-title-content
h1#title [ブログ名]
h2#blog-description [ブログ概要]
div#top-editarea [タイトル下追加HTML]
div#content
div#content-inner
div#wrapper
div#main
div#main-inner
div.archive-entries
section.archive-entry [記事カード]
div.archive-entry-header
div.date archive-date [日付]
h1.entry-title [記事タイトル]
div.categories [カテゴリ]
div.entry-thumb [サムネイル]
div.archive-entry-body
p.entry-description [記事本文抜粋]
aside#box1
div#box1-inner
aside#box2 [サイドバー]
div#box2-inner
div.hatena-module
div#bottom-editarea [フッタ追加HTML]
footer#footer [data-brand="hatenablog"]
div#footer-inner

まとめ

大部分を設計図で、細かな部分はソースと合わせて「箇所」を把握しつつ「boilerplate」を土台にカスタマイズをすれば思い通りにオリジナルテーマを作成出来ます。自分で全体図を作るとHTMLとCSSの勉強にもなりますのでオススメです。