はてなブログ用デザインテーマ『Space』を公開しました
すっかり納豆のことばっかりなこのブログですが「Web」というカテゴリーもあります。
これはいわゆる CSS や JavaScript といったプログラム系？のもので、多くははてなブログのカスタマイズ系の記事です。
まあ、そういうのが好きですし、いまでもちょいちょいいじっています。
それでこのたび、オリジナルのデザインテーマを作り、はてなブログのテーマストアに公開しました。
それがこの『Space』です。
このテーマの特徴は次のような感じです。
- 画面サイズによって微妙に変化する文字サイズと行間
- ↑に連動して微妙に変化する縦方向の余白や高さ
- 「行間の高さ」を基準として大胆にとった空間
- 読むことに集中できるようパンくずやサイドバーは下部に
- 線や装飾をほぼとっぱらったシンプルデザイン
などです。
詳しい解説とか書こうと2，3日下書きしていたのですが、うまくまとまらなかったので挫折しました。さじをなげたとも言います。薄々は感じていたのですが、わたしは文章を書くのが上手くありません（笑）
質問や不具合等ありましたらブログのコメントやTwitterなど、他の方も参考にできるよう公の場所でお願いします。
【、追記】
少し詳細で専門的な解説
ここからはもう少し詳細も書いておいきたいと思います。
主にCSSの構造的なもので、ちょっと専門的な話ですが、カスタマイズの参考になるかもしれません。
余白の大半は上部で指定
以前に話題になったこちらの記事
こちらを参考に、今回のテーマではそのほとんどの要素で余白といった空間を上部（top）でとっています。
特に記事中の段落（ p ）といった要素の大半にmargin-topで余白を設定したいます。
はてなブログのテーマ系CSSでは、多くが段落中の余白をとるのにmargin-bottomが使われています。本テーマでは同じようにmargin-bottomでカスタマイズしても上手く設定できない場合もあります。
同じように、多くの要素でtop系（margin-topやpadding-top）で余白や空間をとっています。
縦方向の間隔は行間基準
テーマの説明でも書いていますが、大半の余白や空間は行間（line-height）の数値を基準にしています。広い余白であっても、基本的には「行間の高さ×2」というように行間の倍数で指定しています。
そして同時に、テーマが画面サイズで微妙に行間が変化するように、これらの余白や空間も画面サイズで変化します。
一例を上げれば記事本文の段落（p要素）。これは次のように指定しています。
.entry-content p { margin: 0; margin-top: 1.9em; } @media (min-width: 576px) { .entry-content p { margin-top: 1.925em; } } @media (min-width: 768px) { .entry-content p { margin-top: 1.95em; } } @media (min-width: 992px) { .entry-content p { margin-top: 1.975em; } } @media (min-width: 1200px) { .entry-content p { margin-top: 2em; } }
フォントの指定はsans-serif。日付はArial
フォントの指定はfont-family:sans-serif;とし、ほとんどのフォントがsans-serifです。
ただ日付だけは見た目とサイズを統一したほうがいいかと思い、Arialに指定したいます。
記事本文中の見出しには、ネガティブマージンを指定しています
見出しのとおりです。記事本文中の見出し（ h2 や h3 等）には、margin-bottomにネガティブマージを指定し、文章の始まりとの余白（間隔）をせばめています。
ネガティブマージンとはなんぞや？という方には次の記事か、検索等で調べてください。
テーマ『Space』でCSS変数（カスタムプロパティ）を導入する
テーマ『Space』ですが、もともとはCSS変数（CSSカスタムプロパティ）で作っていたものです。
そもそも「画面サイズで文字サイズや行間、さらには余白や高さ等も変化する」という仕組みは、CSS変数の存在を知って思いついたことです。
ちなみに「CSS変数とはなんぞや？」という方はこちらやこちら、あと検索で調べてください。
個人的にはかなり便利で魅力的なだCSS変数ですが、残念なことにIE11非対応です。
IE11のシェアはまだ10%程度（2019年あたり）、ちょっと無視できない数字。10人訪れたら1人はIEです。
なので今回のテーマはCSS変数を使わず書いたのですが、CSS変数のカスタマイズしやすさも捨てがたい。
特に今回のテーマ『Space』は前記のように文字サイズや行間・余白が画面サイズで微妙に変化します。
これら全体がカスタマイズしやすいようになっていると、何かといいと思うのです。フォントの種類によっては読みやすい行間とかが変わってきますしね。
前置きが長くなりましたが、そのCSS変数を導入する場合のコードも書きました。
下のCSSをデザイン設定などに書き足せば元のテーマのCSSと同じように動作し、なおかつCSS変数でカスタマイズしやすい、と思います。
ちょっと長いですが、CSSはこちらです。
@supports (line-height: calc( var(--lineHeight) * 1rem) ) { /* CSS変数 */ :root{ --fontSize: 16.2px; --lineHeight: 1.9; } @media (min-width: 576px) { :root{ --fontSize: 16.7px; --lineHeight: 1.925; } } @media (min-width: 768px) { :root{ --fontSize: 17.2px; --lineHeight: 1.95; } } @media (min-width: 992px) { :root{ --fontSize: 17.7px; --lineHeight: 1.975; } } @media (min-width: 1200px) { :root{ --fontSize: 18.2px; --lineHeight: 2; } } /* 文字サイズ・行間 */ html { font-size: var(--fontSize); } body { font-size: 1rem; line-height: var(--lineHeight); } /* 余白や高さ等 */ #wrapper { margin-bottom: calc( var(--lineHeight) * 2em); } #box2 { margin-bottom: calc( var(--lineHeight) * 3em); } #blog-title { padding-top: calc( var(--lineHeight) * 1em); } #blog-title-inner { height: calc( var(--lineHeight) * 6em); } @media (min-width: 768px) { #blog-title-inner { height: calc( var(--lineHeight) * 7em); } } #title { line-height: calc( var(--lineHeight) * 1rem); } #blog-description { padding-top: calc( var(--lineHeight) * 1rem); } .breadcrumb { height: calc( var(--lineHeight) * 2em); } .breadcrumb-inner { line-height: calc( var(--lineHeight) * 1rem); } .entry { margin-top: calc( var(--lineHeight) * 2em); } .entry-header { padding-bottom: calc( var(--lineHeight) * 1em); } .entry-title { line-height: calc( var(--lineHeight) * 1rem); } .date { height: calc( var(--lineHeight) * 1rem); } .entry-date { margin-top: calc( var(--lineHeight) * 1rem); } .categories { height: calc( var(--lineHeight) * 1rem); } .entry-categories + .social-buttons { margin-top: calc( var(--lineHeight) * 1em); } .entry-content { padding-top: calc( var(--lineHeight) * 1em); } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { line-height: calc( var(--lineHeight) * 1rem); margin-top: calc( var(--lineHeight) * 1.5rem); margin-bottom: calc( var(--lineHeight) * -0.5rem); } .entry-content p, .entry-content table, .entry-content ul, .entry-content ol, .entry-content dl, .entry-content blockquote, .entry-content pre { margin-top: calc( var(--lineHeight) * 1em); } .entry-content hr { margin-top: calc( var(--lineHeight) * 1em); } .entry-content .table-of-contents { padding-top: calc( var(--lineHeight) * 0.5rem); padding-bottom: calc( var(--lineHeight) * 0.5rem); } div.footnote { margin-top: calc( var(--lineHeight) * 2rem); } .entry-footer { margin-top: calc( var(--lineHeight) * 2em); } .entry-footer-modules .hatena-module { padding-top: calc( var(--lineHeight) * 1em); } .entry-see-more { margin-top: calc( var(--lineHeight) * 1em); } .comment-box { padding-top: calc( var(--lineHeight) * 2em); } .comment-box .entry-comment { padding-bottom: calc( var(--lineHeight) * 1em); } .comment-box .read-more-comments { padding-bottom: calc( var(--lineHeight) * 1em); } .pager { height: calc( var(--lineHeight) * 2rem); margin-top: calc( var(--lineHeight) * 2rem); } .hatena-module { padding-top: calc( var(--lineHeight) * 1em); } .hatena-module-title { margin-top: calc( var(--lineHeight) * 0.875em); padding-bottom: calc( var(--lineHeight) * 0.125em); } .hatena-urllist li { padding-top: calc( var(--lineHeight) * 0.25rem); padding-bottom: calc( var(--lineHeight) * 0.25rem); } .page-index .entry + .entry { margin-top: calc( var(--lineHeight) * 4em); } .page-about .entry-content dd { margin-top: calc( var(--lineHeight) * 1em); } .page-about .entry-content dd + dt { margin-top: calc( var(--lineHeight) * 2em); } .archive-heading, .archive-header-category .archive-heading { line-height: calc( var(--lineHeight) * 1rem); margin-top: calc( var(--lineHeight) * 2rem); margin-bottom: calc( var(--lineHeight) * 1rem); } .page-archive .archive-entry { margin-top: calc( var(--lineHeight) * 2em); } .page-archive .entry-thumb { margin-top: calc( var(--lineHeight) * 0.5rem); margin-bottom: calc( var(--lineHeight) * 0.5rem); } .page-archive .archive-entry-body { margin-top: calc( var(--lineHeight) * 0.5rem); margin-bottom: calc( var(--lineHeight) * 0.5rem); } #footer-inner { height: calc( var(--lineHeight) * 2rem); } /* 上書き後に生じる不具合の修正用CSS */ .hatena-asin-detail ul { margin: 0; } .hatena-module-category li { padding-top: 0; padding-bottom: 0; } }
これでいけるはずです。バグとかあったら後で訂正します。
@supportsですが、もともとline-heightでcalc()やvar()とかが効かないと意味がないのでで、それらを対応条件にしています。
でもちょっと長すぎてややこしいですね。こういうのは新技術がでたり、賢い人が「すげぇ…」と感嘆するCSSを公開してくれたりと、要はもっと上手い方法があるような気がするのですが、個人的に現時点ではこれでせいいっぱいっす。
テーマをインストールしたけど、なんか読みにくかったり、違和感があるなぁ～、なんてときには参考にしてみて下さい。
このようにカスタマイズしやすいようで、少々クセのあるテーマです。
基本的にはカスタマイズしやすいように意識して作りましたので、今回の記事がカスタマイズの参考になれば嬉しいです。
スポンサーリンク
