はてなブログテーマ制作の手引き

はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。作成したテーマは、テーマストアに投稿して、ほかのはてなブログユーザーに使ってもらうこともできます。

本ドキュメントでは、Webデザイナーの方がはてなブログ用オリジナルテーマを作成するために必要な情報をまとめています。

※オリジナルテーマの作成は、CSSの知識がある方を対象にしています。

テーマを作成する準備

テーマを作成するにあたって、まずデザインを確認できる環境を用意しておくと作業がはかどります。

1. テーマ確認用のブログを開設する

テーマを確認するために、専用のはてなブログを新しく開設することをおすすめします。はてなブログでは、1アカウントにつき最大3つまで(有料プラン「はてなブログPro」に加入すると最大10個まで)のブログを開設できます(詳細は、ヘルプ「はてなブログを始める」を参照)

共同作業が必要なければ、ブログの公開範囲を「自分のみ」が閲覧できるようにしておけばよいでしょう。

2. サンプルエントリーをコピー

デザインを確認できるように、はてなブログの記事に必要な要素をあらかじめまとめた「サンプルエントリー」を用意しています。

これをコピーして、先ほど用意したテーマ確認専用ブログの編集画面に貼り付け、新しい記事として投稿してください。CSSを修正したら、この記事を表示してデザインを確認するとよいでしょう。

サンプルテーマ「Boilerplate」

はてなブログのデザインCSSをカスタマイズする土台に適したサンプルテーマ「Boilerplate」を配布しています。

このテーマをもとにCSSを記述すると、ゼロからテーマを作るのが難しいという方でも、比較的簡単にデザインテーマを作ることができます。

Boilerplateテーマの使い方

Boilerplateテーマのソースコード(CSSおよびLESSファイル)は、GitHub(github.com/hatena)で公開しています。

GitHubでBoilerplateテーマのソースコードを見る

このCSSおよびLESSファイルは、MITライセンスのもとで自由に複製・再配布できます。このサンプルテーマをもとにしたテーマの配布も自由です。記事本文の書式やコメント欄のスタイルなど、必要な部分だけをコピーして使ってもかまいません。

はてなブログのページ構成

はてなブログは、次のような種類のページで構成されています。それぞれのページが正しく見られるようにデザインする必要があります。

トップページ
┣ パーマリンク(記事ページ)
┣ Aboutページ
┣ Archiveページ
┣ Archive/Categoryページ
┗ Searchページ

各ページの例

上記のページは、サンプルのブログ を例に取ると、それぞれ次のURLが該当します。

ページの種類 URLの例
トップページ http://sample.hatenastaff.com/
パーマリンク(記事ページ) top_url/entry/2013/01/25/121312
Aboutページ top_url/about
Archiveページ top_url/archive
〃(年間) top_url/archive/2012
〃(月間) top_url/archive/2012/01
〃(日付ごと) top_url/archive/2013/01/09
〃(カテゴリー) top_url/archive/category/%E6%96%B0%E6%A9%9F%E8%83%BD
Searchページ top_url/search?q=%E3%81%AF%E3%81%A6%E3%81%AA

top_urlにはブログのトップページのURL(ここではhttp://sample.hatenastaff.com/を当てはめてください。

CSSチェックリスト

オリジナルのテーマを作成するには、少なくとも以下の箇所に対してCSSを書く必要があります。このチェックリストをもとに、書き忘れた箇所がないか確認しましょう。

  • ブログタイトル
  • ブログの説明
  • 記事
    • 日付
    • カテゴリー
    • 「編集」リンク
    • キーワードリンク
    • 記事下の広告
    • コメント欄
  • サイドバーモジュール
    • プロフィール、最新記事などの各モジュール
  • ページャー
  • フッターリンク
  • Aboutページ
  • Archiveページ
    • カテゴリーのパンくずリスト

デザインとコーディングの注意事項

作成したテーマをテーマストアに投稿する際は、下記の注意事項を守ってください。

  • 一般的に使用されているWebブラウザについて、各PC環境(WindowsまたはMac)の各最新版で正しく表示されるようにしてください(具体的にはヘルプ「はてなブログでの使用を推奨するWebブラウザ」を参照してください)
    • レスポンシブデザインのテーマでは、スマートフォン環境(AndroidおよびiOS)での表示も確認してください。
  • ヘッダーメニューを移動したり隠したりしないでください。
  • はてなブログのすべての機能が正しく使えるデザインにしてください。
    • やむを得ず一部の機能が利用できなかったり、隠れてしまう場合には、必ずテーマ ストアの「テーマの説明」欄にその旨を明記してください。
  • テーマで使う画像のホスティングには、はてなフォトライフの利用を推奨します。
  • 広告を隠したり、広告に別の要素を重ねて表示しないでください。

デザインカスタマイズの仕様

背景画像

  • ユーザーは「デザイン設定」の「カスタマイズ」タブの「背景画像」で、背景画像を設定できます。
  • 用意された画像の中からも選ぶことも、ユーザーがアップロードすることもできます。
  • ユーザーが背景を設定すると、選択した画像に応じて「デザインCSS」欄に下記のようなスタイルが指定されます。
/* <system section="background" selected="bg1"> */
body{
 background-color:#3e2d1b;
 background-image:url('/images/theme/backgrounds/theme1.jpg');
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position:center top;
 background-size:cover; }
/* </system> */

タイトル画像

  • ユーザーは「デザイン設定」の「カスタマイズ」タブの「ヘッダ」で、自由にタイトル画像をアップロードできます。
  • デフォルトで表示されるタイトル画像のサイズは、高さが200px、横幅は最大1000pxです。
  • タイトル画像を設定すると、div#blog-title-innerに下記のような専用のスタイルがインラインで指定されます。
<div id="blog-title-inner" style="background-image: url('http://example.com/20121206113746.jpg');
 background-position: center ユーザーが「位置を調整する」で指定した表示領域のオフセット値 px;">
   <h1 id="title"><a href="/">はてなブログ開発検証用日記</a></h1>
   <h2 id="blog-description">ブログの説明</h2>
</div>
タイトル画像のクラス
  • タイトル画像を指定すると、「表示設定」に応じてbodyタグに下記のクラスが付与されます。
  • 基本的にスタイルはあらかじめ調整されており、各テーマで細かな調整を行います。
タイトル画像の表示方法 bodyに付与されるクラス
タイトル画像なし なし
画像とテキストを表示 header-image-enable
画像だけ表示 header-image-only

HTMLを自由記述できる箇所

  • ユーザーは「デザイン設定」の「カスタマイズ」タブの下記の欄で、自由にHTMLを書くことができます。
  • この部分には特にスタイルを書く必要はありませんが、余白などを整えてもよいでしょう。
  • ユーザーが記述したHTMLは、次のようなIDやクラスが付与されたdiv内に置かれます。
HTMLを記述できる箇所 表示されるページ 付与されるセレクタ
タイトル下(ヘッダ) すべてのページ div#top-editarea
記事上(記事) 記事ページ div.entry-header-html
記事下(記事) 記事ページ div.entry-footer-html
フッタ すべてのページ div#bottom-editarea

Archiveページ

Archiveページは、「はてなブログのページ構成」で説明したように、過去の記事一覧を表示するページです。

Archiveページには、記事のサムネイルと本文冒頭が表示されます。以下にCSS記述例を挙げます。

.page-archive .archive-entries .archive-entry {
  margin-bottom: 3em;
}
.page-archive .archive-entries .date {
  position: static;
}
.page-archive .archive-entries .entry-title {
  font-size: 130%;
  margin: 0 0 .5em;
}
.page-archive .archive-entries .categories {
  margin: 0 0 .5em;
}
.page-archive .archive-entries .entry-description {
  font-size: 100%;
  margin: 0 0 1em;
  line-height: 1.5em;
}

ページャ

トップページと記事パーマリンクには、「過去の記事」「新しい記事(またはページ)」へのリンクとなるページャが表示されます。パーマリンクのページャには、記事タイトルが表示されます。以下にCSS記述例を挙げます。

.pager {
    margin: 1em 0;
    display: block;
    *zoom: 1;
}
.pager:after {
    display: block;
    visibility: hidden;
    font-size: 0;
    height: 0;
    clear: both;
    content: ".";
}
.pager .pager-prev {
    float: left;
    text-align: left;
    width: 45%;
}
.pager .pager-next {
    float: right;
    text-align: right;
    width: 45%;
}

ヘッダーメニュー

ヘッダーメニューとは、ブログの上部にある、はてなブログロゴやメニューが並んでいるバーです。ヘッダーメニューはiframeですが、下記のようなCSSを書くとiframe内にも色が反映されます。ロゴ色も文字色に合わせて変わります。

#globalheader-container {
    color: #333;
    background: #fff;
}

はてなブログPro

有料プラン「はてなブログPro」に加入しているユーザーのブログでは、はてなブログのヘッダーメニューとフッターリンクを表示しないようにできます。このときクラスなどに次のような変更があります。

  • ヘッダーメニューの要素(#globalheader-container)が消える
  • フッターリンクの要素(footer#footer)が消える
  • 消えた状態を表すためglobalheader-offクラスがbodyに付与される

レスポンシブデザインのテーマを作成する際の注意点

はてなブログでは、レスポンシブデザインのデザインテーマに対応しています。

※ブログテーマが正しくレスポンシブデザインに設定されていないと、単に画面サイズを縮小しただけのブログが表示されるなど、かえって見づらくなるおそれがあります。必ず、ここでの説明に従ってブログテーマを設定してください。

スマートフォンで適切に表示されるレスポンシブデザインのテーマは、次の2つの条件を満たすように作成してください。

  1. Media queries(メディアクエリ)などを使用して、どのデバイスから閲覧しても適切な見た目になるよう、デザインテーマのCSSを調整する
  2. テーマのCSSの先頭にResponsive: yesという行を含んだコメントを挿入する

例えば、Evergreenテーマでは下記のようなコメントを記述しています。なお、コメントにはテーマ作者などの情報をこのように含めるのもよいでしょう。

/*
  Theme: evergreen
  Author: Hatena Blog Team
  Description:
  1カラムで文章を書くことに集中できるテーマです
  Responsive: yes
 */

デザインテーマにこのようなコメントが記述されている場合、はてなブログでは下記のようにスマートフォンデバイスに適したviewportをHTMLヘッダーで指定します。

    <meta name="viewport" content="width=device-width">
※このように設定したデザインテーマを適用したブログで、レスポンシブデザインを有効にするには、デザイン編集画面の「スマートフォン」タブで設定します。詳細は、ヘルプ「ブログのデザインを変更する(スマートフォン)」を参照してください。

はてなブログの機能追加にともなうHTML構造の変更履歴

最新記事モジュールにサムネイル画像を表示(2014年3月13日

  • サイドバーの編集記事モジュールにサムネイル画像を表示できるようにしました。
  • CSSで装飾するには、ul要素のurllist-with-thumbnailsクラスあるいはimg要素のrecent-entries-entry-imageクラスを利用してください

Archiveページのサムネイル表示(2014年2月28日

  • Archiveページに記事のサムネイルと本文の冒頭を表示するよう仕様を変更しました。
  • この変更にともない、デザインテーマのCSSを修正していただく必要があります。(→ 修正例を見る

ページャに記事タイトルを表示(2014年2月28日

  • 記事パーマリンクの「次の記事」「前の記事」といったページャに、それぞれの記事タイトルを表示するよう変更しました。
  • この変更にともない、デザインテーマのCSSの修正が必要になる場合があります。(→ 修正例を見る

記事上にHTMLを記述できる機能(2014年2月5日

  • 記事ページのタイトルと本文の間(記事上)にも、ユーザーが自由にHTMLを書ける場所を設置したため、「HTMLを自由記述できる箇所」の記述に追加しました。

続きを読む記法 (2013年3月27日)

  • トップページに記事を途中まで表示できる「続きを読む」記法を追加しました。
  • CSSで装飾するには、「続きを読む」aタグのentry-see-moreというクラスを利用してください。