はてなダイアリーが1月28日に終了することになったので、はてなブログに引っ越しました。はてなダイアリーでは自分でカスタマイズしたデザインを使用していたので、はてなブログでも同じデザインになるように変更します。
レイアウト
はてなブログの表示モードには index、entry、archive、about の4つがあり、そのどれが適用されているかは body要素の class に設定されている値から知ることができる。それぞれのHTMLの大まかな構造*1は以下の通り。
index
トップページにアクセスした時の表示モード。設定で指定した件数の記事が「続きを読む」の部分まで表示される。
html body.page-index div#globalheader-container /* ツールバー */ div#container header#blog-title /*ブログタイトル */ div#content div#main article.entry /* 記事 */ article.entry /* 記事 */ …… div.pager /* ページめくり */ aside#box2 /* サイドバー */ footer#footer /* フッタ */
entry
記事にアクセスした時の表示モード。対象の記事が全文表示される。パンくずリストは設定で指定したときだけ表示される。
html body.page-entry div#globalheader-container /* ツールバー */ div#container header#blog-title /* ブログタイトル */ div#top-box /* パンくずリスト */ div#content div#main article.entry /* 記事 */ div.pager /* ページめくり */ aside#box2 /* サイドバー */ footer#footer /* フッタ */
archive
カテゴリー、月別アーカイブ、検索などの一覧表示モード。最大30件の記事が要約された形で表示される。パンくずリストはカテゴリーを選択したときだけ表示される*2。
html body.page-archive div#globalheader-container /* ツールバー */ div#container header#blog-title /* ブログタイトル */ div#top-box /* パンくずリスト */ div#content div#main div.ad-online-afc /* 広告 */ h2.archive-heading /* 一覧タイトル */ section.archive-entry /* 記事要約 */ section.archive-entry /* 記事要約 */ …… div.pager /* ページめくり */ aside#box2 /* サイドバー */ footer#footer /* フッタ */
about
「このブログについて」の表示モード。
html body.page-about div#globalheader-container /* ツールバー */ div#container header#blog-title /* ブログタイトル */ div#content div#main article.entry div.section /* ユーザが記述した内容 */ div.section /* システムが出力するブログの情報 */ aside#box2 /* サイドバー */ footer#footer /* フッタ */
全体のレイアウトは以下の要素を調整すれば決定できる。
- #globalheader-container (ツールバー)
- #blog-title (ブログタイトル)
- #top-box (パンくずリスト)
- #main (メインコンテンツ)
- #box2 (サイドバー)
- #footer (フッタ)
レイアウトを把握するためには以下のCSSを追加すると便利。
#blog-title { background: #cff; } #top-box { background: #fcf; } #main { background: #ff8; } #box2 { background: #cfc; } #footer { background: #ccf; }
記事やサイドバーの構造は以下の通り。
記事
article.entry header.entry-header div.date /* 日付 */ h1.entry-title /* タイトル */ div.categories /* カテゴリー */ div.entry-header-menu /* 編集リンク */ div.entry-content div.footnote /* 脚注 */ a.entry-see-more /* 続きを読む */ footer.entry-footer p.entry-footer-section /* 更新者、更新時間 */ div.hatena-star-container /* はてなスター */ div.social-buttons /* SNS関連ボタン */ div.google-afc-image /* 広告 */ div.comment-box /* コメント */
記事要約
section.archive-entry div.archive-entry-header div.date /* 日付 */ h1.entry-title /* タイトル */ div.categories /* カテゴリー */ a.entry-thumb-link /* アイキャッチ画像 */ div.archive-entry-body span.social-buttons /* はてなスター */
サイドバー
aside#box2 div.hatena-module /* モジュール */ div.hatena-module-title /* タイトル */ div.hatena-module-body /* 内容 */ ……
記事と記事要約で構造や名称が不一致なのが面倒だが、構造を無視して
- .date (日付)
- .entry-title (タイトル)
- .categories (カテゴリー)
をセレクタとすれば差を気にする必要はなくなる。
変更のポイント
編集リンク
編集リンクが出たり消えたりするギミックがJavaScriptで実装されているので、position: absolute;で特別扱いしないと表示が乱れてしまう。absoluteを指定した要素は「包含要素」からの相対位置に配置できるので、記事ヘッダに position: relative; を指定して包含要素にし、そこからの相対位置を指定するとよい。
header.entry-header { position: relative; } .entry-header-menu { position: absolute; top: 3px; right: 5px; }
indexモードでの脚注、コメント、SNSボタン
indexモードでの脚注の表示位置が変更され、「続きを読む」の前に脚注が出るようになったが、違和感があるので非表示にする。また、archiveモードの一覧表示ではコメント、SNSボタンは表示されないので、indexモードでもこれらも非表示にする。
.page-index .footnote { display: none; } .page-index .social-buttons { display: none; } .page-index .comment-box { display: none; }
