この『Space』は文字のサイズや、文字と文字との空間や余白を重視し、読みやすさを意識してデザインされた1カラムテーマです。もちろんレスポンシブ対応。線や装飾といったものは極力使わず、かなりシンプルなテーマになっています。
このテーマの特徴
- 「読む」ことを意識したシンプルなデザイン
- パンくずやサイドバーをすべて下部へ移動
- 画面の幅によって変わる文字サイズや行間
- 行間を参考にして作られた縦方向の余白や空間(よって、こちらも画面幅で変化します)
簡単なカスタマイズ例
簡単なカスタマイズ例をいくつかご紹介します。
デザインのカスタマイズの仕方は、ヘルプのブログのデザインを変更する(カスタマイズ) - はてなブログ ヘルプや、「はてなブログ カスタマイズ」などでネット検索などをしたら簡単にやり方が分かります。
横幅を変える
よくレクタングル(大)系の広告を2つ並べて設置しているブログがありますが、本テーマでは横幅の最大値を「読みやすい」と感じる文字数(一行最大35文字)に設定しています。カスタマイズしなければ横幅が足りませんので、表示する場合は次のうように変更してください。
#container { max-width: 672px; }
ブログ名を左寄せ
ブログ名を左側に寄せにしたいときは、次のように設定します。
#blog-title-content { text-align: left; }
パンくずを戻す
パンくずを通常通りの場所に表示する場合、次のようにすれば戻ります。
#top-box { order: 0; }
フォントサイズ・行間を変える
このテーマはモバイル相当の画面(575px以下)の文字サイズを基準として画面の大きさで相対的に変化します。また全体の余白や高さなど、縦方向のそのほとんどが文字サイズの変化で相対で微妙に変わります。
この基準となる文字サイズを変更すると、全体の文字サイズも変更します。
html { font-size: 16px; }
また(ちょっと専門的な話なのですが)見出しや引用といったものもデザイン設定から上書きできますが、その場合、上記に書かれている「画面の大きさで微妙に変化する」といったことは無くなります。
どの画面サイズでどのように変化するかは、下のように指定していますので、ご参考にしてください。
html { /* 0px~575px */ font-size: 16.2px; /* 文字サイズ */ line-height: 1.9; /* 行間 */ } /* * 変更はbodyタグで指定しています。 */ @media (min-width: 576px) { /* 576px~767px */ body { font-size: 1.03086em; /* 約16.7px */ line-height: 1.925; } } @media (min-width: 768px) { /* 768px~991px */ body { font-size: 1.06173em; /* 約17.2px */ line-height: 1.95; } } @media (min-width: 992px) { /* 992px~1199px */ body { font-size: 1.09259em; /* 約17.7px */ line-height: 1.975; } } @media (min-width: 1200px) { /* 1200px以上 */ body { font-size: 1.12346em; /* 約18.2px */ line-height: 2; } }
ダークモード
iPhone等のダークモードで背景色や文字色を変えたい場合、簡単ではありますが次のCSSを使うと対応できます。
@media (prefers-color-scheme: dark) { body { background: #000; } #title a, #title a:visited, a.keyword, a:hover, body, h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited, .comment-content, .hatena-module-title a, .hatena-urllist li a { color: #fff; } .entry-content code { border: 1px solid hsla(0, 0%, 100%, 0.1); background: hsla(0, 0%, 100%, 0.2); } .hatena-module-category li, .hatena-urllist .urllist-category-link, .entry-content blockquote, .entry-category-link, .page-archive .archive-category-link { background: hsla(0, 0%, 100%, 0.1); } .entry-content blockquote p { color: hsla(0, 0%, 70%, 1); } .hatena-module-search-box .search-form { background: hsla(0, 100%, 100%, 1); } .table-of-contents { background: hsla(0, 0%, 100%, 0.1); } .entry-tag-link:hover .entry-tag-icon path{ fill: hsl(208, 100%, 100%); } }
謝辞・お問い合わせ
このテーマは、はてなブログのカスタマイズ用テーマ「Boilerplate」を参考にして作られています。
質問や不具合など問い合わせがありましたら、ブログのコメントやTwitterなど、他の方も参考にできる場所からお願いします。
更新履歴
【2020/10/14】新機能「タグ」のデザインを追加
【2020/02/15】ダークモードの説明を追加
【2020/02/12】デザインや説明等を一部修正
【2019/08/07】デザインを微調整
【2019/08/04】テーマの説明修正と、デザインを微調整
【2019/08/02】テーマの説明を加筆修正
【2019/07/31】テーマ公開