デザインテーマ制作の手引き

デザインカスタマイズ

はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。作成したテーマは、テーマストアに投稿して、ほかのはてなブログユーザーに使ってもらうこともできます。
既存のデザインテーマをブログにインストールしたい場合はヘルプ「デザインテーマをインストールする」を参照してください。

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

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

テーマを作成する準備

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

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

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

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

テーマのCSSは、ブログのデザイン編集画面「デザインCSS」欄に記述していきます （詳細は、ヘルプ「デザインCSSを記述する」を参照）。

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

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

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

サンプルテーマ「Boilerplate」

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

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

Boilerplateテーマの使い方

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

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

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

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

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

  1. Media queries（メディアクエリ）などを使用して、どのデバイスから閲覧しても適切な見た目になるよう、デザインテーマのCSSを調整する
  2. テーマのCSSの先頭にResponsive: yesという行を含んだコメントを挿入する
    • テーマの開発時などで、テーマストア以外からCSSをインポート（@import）する場合は、インポート先のCSSではなく「デザインCSS」欄に直接 Responsive: yes コメントを記述してください。

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

/*
  Theme: evergreen
  Author: Hatena Blog Team
  Description:
  1カラムで文章を書くことに集中できるテーマです
  Responsive: yes
 */
正しくレスポンシブデザインに対応していないデザインテーマは、単に画面サイズを縮小しただけのブログが表示されるなど、かえって見づらくなるおそれがあります。必ず、ここでの説明に従ってテーマを作成してください。また、作成後にさまざまなデバイス幅で動作確認を行ってください。

レスポンシブデザインを有効にする

このように設定したデザインテーマを適用したブログで、レスポンシブデザインを有効にするには、デザイン編集画面の「スマートフォン」タブで設定します。詳細は、ヘルプ「ブログのデザインを変更する（スマートフォン）」を参照してください。

付録: はてなブログのレスポンシブデザインテーマの挙動

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

トップページ
┣ パーマリンク（記事ページ）
┣ 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ページ
    • カテゴリーのパンくずリスト

スタイルの記述が必要ないもの

以下の項目はあらかじめ標準のCSSが適用されているため、デザインテーマでスタイルの記述は不要です。

これらの要素にスタイルを記述した場合、将来のはてなブログの仕様変更によって、予告なく正常に表示されなくなることがあります。

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

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

  • 一般的に使用されているWebブラウザについて、各PC環境（WindowsまたはMac）の各最新版で正しく表示されるようにしてください（具体的にはヘルプ「はてなブログでの使用を推奨するWebブラウザ」を参照してください）。
    • レスポンシブデザインのテーマでは、スマートフォン環境（AndroidおよびiOS）での表示も確認してください。
  • ヘッダ・フッタを移動したり隠したりしないでください。また、ヘッダメニューより上部やフッタより下部に要素を置かないでください。（border等の装飾も含む）。
  • はてなブログのすべての機能が正しく使えるデザインにしてください。
    • やむを得ず一部の機能が利用できなかったり、隠れてしまう場合には、必ずテーマ ストアの「テーマの説明」欄にその旨を明記してください。
    • 機能が正常に使えないような場合には、選択されたライセンスの許諾事項に関わらず、はてなにて修正対応を行うことがございますのでご了承ください。
  • テーマで使う画像のホスティングには、はてなフォトライフの利用を推奨します。
  • 広告を隠したり、広告に別の要素を重ねて表示しないでください。
  • カテゴリーに対して「タグ」または「ハッシュタグ（#）」の装飾を用いることは避けてください。これらのモチーフはタグを表すときに使います。
  • 自分だけが使う目的で、テーマストアに非公開で投稿することは問題ありません。
    • ただし、はてなブログ以外のウェブページからCSSを参照する目的で投稿したり、はてなブログのデザインテーマに関係のないCSSを投稿した場合、テーマの公開停止や削除処置をとることがあります。

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

背景画像

  • ユーザーは「デザイン設定」の「カスタマイズ」タブの「背景画像」で、背景画像を設定できます。
  • 用意された画像の中からも選ぶことも、ユーザーがアップロードすることもできます。
  • ユーザーが背景を設定すると、選択した画像に応じて「デザイン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%;
}

ヘッダーメニュー

ヘッダーメニューとは、ブログの上部にある、はてなブログロゴやメニューが並んでいるバーです。あらかじめスタイルが適用されていますので、デザインテーマでのスタイリングは不要です。

はてなブログPro

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

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

関連項目

はてなブログの機能追加にともなう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というクラスを利用してください。