はてなブログテーマ「Stacker」を公開しました

前回のテーマ公開からはや半年、学んだことのアウトプットをかねて新しくブログテーマを作りました。
テーマインストールはこちらから。 Stacker - テーマストア - はてなブログ
※改良テーマ Tiles をご利用ください

基本的な特徴

ページによって外観が異なります。また、レスポンシブ対応しています。

トップページ

PC画面では、記事を２列表示します。
本当はPinterestっぽくしたかったのですが、無料ではてなブログを利用する際に表示される広告の横幅（336px）の確保が必要だったため、２列までにしました。

記事の順番に癖があり、左上→左下→右上→右下と並びます。
短文や写真がメインのブログ向きです。長文でも、「続きを読む」機能を使えばコンパクトになります。

スマホだとこんな感じ。あんまり変化ないですが、「続きを読む」を設定するとトップページでは記事がコンパクトに表示されます。

記事ページ

１カラムです。横幅の最大値を指定してあり、大きなディスプレイでも読みやすいよう配慮しています。

アーカイブ（カテゴリ）ページ

トップと同様、２カラムです。

背景の設定

はてなブログには管理画面で背景色・画像を設定する機能があり、それに対応しています。

PCトップページはこんな感じ。

記事ページは、ヘッダーとフッターの背景が変わります。コンテンツ部分は白にして読みやすさを重視しています。

スマホも対応しています。

暗い背景にした時、ヘッダーのリンク文字が読みにくくなってしまうので、必要に応じてデザインCSSを編集する必要があります。

カスタマイズのご案内

管理画面からの設定でできるカスタマイズ

ブログをレスポンシブ表示させる

はてなブログは通常、スマートフォンで見ると専用表示に切り替わります。ですが、レスポンシブ対応しているテーマであれば、PCと統一感のある表示にすることができます。

「管理画面 > デザインCSS > スマートフォン設定 > 詳細設定」の中の「レスポンシブデザイン」にチェックを入れて、「変更を保存」してください。

記事に「続きを読む」を設定する

記事を投稿する時に、必要な記述をすると「続きを読む」を設定できます。

「見たままモード」の場合、エディタの「続きを読む」アイコンをクリックすると必要な記述が挿入されます。
はてな記法であれば、「====」を文中に書くだけです。

デザインCSSの変更が必要なカスタマイズ

ブログタイトルの色を変える

背景に暗い色や背景を指定すると、ブログのタイトルや説明文が背景に馴染んで読みにくくなります。

管理画面のデザインCSSに以下のようにコードを追加すると変更できます。

#title a
{
	color:#ffffff;
}
#blog-description
{
	color:#ffffff;
}

赤字の箇所をお好みの色に変更してください。

www.colordic.org

記事ブロックの背景を変える

背景が暗い時、記事コンテンツの背景が真っ白だと明るすぎる…。というような時に、このコードを記述すると変更できます。

#container #content #content-inner #main .entry
{
	background:#eaeaea;
}

赤字の箇所をお好みの色に変更してください。

www.colordic.org

PCトップを３列表示にする

以下の条件を満たせば、こんな３カラムデザインを実現できます。

• はてなブログProに契約し、広告表示を「しない」に設定する
• 「列を３列にするコード」を記述
• 「トップページの記事フッター部を非表示にするコード」を記述

列を３列にするコード

#container #content #content-inner #main
{
	column-count:3;
}

トップページの記事フッター部を非表示にするコード

.page-index .entry-footer
{
	display:none;
}

フィードバック（ご意見・不具合について）

当ページに言及いただくなり、Twitterなりでご連絡ください。

また、Githubにてコードを公開しておりますのでご自由にご利用ください。プルリク大歓迎です！