前回のテーマ公開からはや半年、学んだことのアウトプットをかねて新しくブログテーマを作りました。
テーマインストールはこちらから。 Stacker - テーマストア - はてなブログ
※改良テーマ Tiles をご利用ください
基本的な特徴
ページによって外観が異なります。また、レスポンシブ対応しています。
トップページ
PC画面では、記事を２列表示します。
本当はPinterestっぽくしたかったのですが、無料ではてなブログを利用する際に表示される広告の横幅（336px）の確保が必要だったため、２列までにしました。
記事の順番に癖があり、左上→左下→右上→右下と並びます。
短文や写真がメインのブログ向きです。長文でも、「続きを読む」機能を使えばコンパクトになります。
スマホだとこんな感じ。あんまり変化ないですが、「続きを読む」を設定するとトップページでは記事がコンパクトに表示されます。
記事ページ
１カラムです。横幅の最大値を指定してあり、大きなディスプレイでも読みやすいよう配慮しています。
アーカイブ（カテゴリ）ページ
トップと同様、２カラムです。
背景の設定
はてなブログには管理画面で背景色・画像を設定する機能があり、それに対応しています。
PCトップページはこんな感じ。
記事ページは、ヘッダーとフッターの背景が変わります。コンテンツ部分は白にして読みやすさを重視しています。
スマホも対応しています。
暗い背景にした時、ヘッダーのリンク文字が読みにくくなってしまうので、必要に応じてデザインCSSを編集する必要があります。
カスタマイズのご案内
管理画面からの設定でできるカスタマイズ
ブログをレスポンシブ表示させる
はてなブログは通常、スマートフォンで見ると専用表示に切り替わります。ですが、レスポンシブ対応しているテーマであれば、PCと統一感のある表示にすることができます。
「管理画面 > デザインCSS > スマートフォン設定 > 詳細設定」の中の「レスポンシブデザイン」にチェックを入れて、「変更を保存」してください。
記事に「続きを読む」を設定する
記事を投稿する時に、必要な記述をすると「続きを読む」を設定できます。
「見たままモード」の場合、エディタの「続きを読む」アイコンをクリックすると必要な記述が挿入されます。
はてな記法であれば、「====」を文中に書くだけです。
デザインCSSの変更が必要なカスタマイズ
ブログタイトルの色を変える
背景に暗い色や背景を指定すると、ブログのタイトルや説明文が背景に馴染んで読みにくくなります。
管理画面のデザインCSSに以下のようにコードを追加すると変更できます。
#title a { color:#ffffff; } #blog-description { color:#ffffff; }
赤字の箇所をお好みの色に変更してください。
記事ブロックの背景を変える
背景が暗い時、記事コンテンツの背景が真っ白だと明るすぎる…。というような時に、このコードを記述すると変更できます。
#container #content #content-inner #main .entry { background:#eaeaea; }
赤字の箇所をお好みの色に変更してください。
PCトップを３列表示にする
以下の条件を満たせば、こんな３カラムデザインを実現できます。
- はてなブログProに契約し、広告表示を「しない」に設定する
- 「列を３列にするコード」を記述
- 「トップページの記事フッター部を非表示にするコード」を記述
列を３列にするコード
#container #content #content-inner #main { column-count:3; }
トップページの記事フッター部を非表示にするコード
.page-index .entry-footer { display:none; }
フィードバック（ご意見・不具合について）
当ページに言及いただくなり、Twitterなりでご連絡ください。
また、Githubにてコードを公開しておりますのでご自由にご利用ください。プルリク大歓迎です！
