読者です 読者をやめる 読者になる 読者になる

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

f:id:mitakanoco:20170316131202j:plain

これは仮エントリーです。

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

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

※オリジナルテーマの作成は、CSSの知識がある方を対象にしています。
テーマを作成する準備
1. テーマ確認用のブログを開設する
2. サンプルエントリーをコピー
サンプルテーマ「Boilerplate」
Boilerplateテーマの使い方
はてなブログのページ構成
各ページの例
CSSチェックリスト
デザインとコーディングの注意事項
デザインカスタマイズの仕様
背景画像
タイトル画像
タイトル画像のクラス
HTMLを自由記述できる箇所
Archiveページ
ページャ
ヘッダーメニュー
はてなブログPro
レスポンシブデザインのテーマを作成する際の注意点
関連項目
ブログの機能追加にともなうHTML変更履歴
最新記事モジュールにサムネイル画像を表示(2014年3月13日)
Archiveページのサムネイル表示(2014年2月28日)
ページャに記事タイトルを表示(2014年2月28日)
記事上にHTMLを記述できる機能(2014年2月5日)
続きを読む記法 (2013年3月27日)
テーマを作成する準備

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

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

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

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

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

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

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

サンプルテーマ「Boilerplate」

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

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

Boilerplateテーマの使い方

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

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

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

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

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

トップページ