はてなブログのデザインを変更する

はてなダイアリーが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; }

キーワードリンク

キーワードリンクの色を変えたいのだが、システムの出力するCSScolor: inherit!important; と強制されているので変更できない*3。仕方ないので opacity: で色を薄く見せることにする。

.keyword {
    text-decoration: none;
    opacity: 0.5;
}

脚注

脚注へのポインタは「上付き文字」であるべきだと思うのだが、そうなっておらず、さらには脚注へのポインタの目印すらない*4アドホックなやり方だが、a[title] で代用する。

a[title] {
    font-size: 70%;
    vertical-align: super;
    text-decoration: none;
}

完成したCSS

現在適用中のCSSは以下の通りです。

*1:実際にはこれら以外に冗長な要素がかなりある

*2:設定で非表示にはできない

*3:color: inherit; にとどめておくべきだったと思う

*4:はてなダイアリーでは span.footnote で指定できたのに...