はてなブログをはじめて最初に悩んだのがテーマ選択でした。
柄にもなくシンプルで余白の美しいモノが好きなので、そこで選んだのがこれです。
ほんと、シンプルで美しいですよね!
デフォルトでもこじんまりオシャレにまとまっているので、そのまま使えるのですが、ちょっとだけ好みにカスタマイズしてみました。
下記のような好みの方のご参考になれれば幸いです。
- タイトルをドーン!とビッグに!
- 記事の文字をもうちょっと大きく、でも主張は少なく!
- カテゴリ表示部分は記事の本質ではないので、存在を薄く・・・
- 横幅は画面幅いっぱい使いたい!
デザインCSS
はてなブログ管理画面 > デザイン > カスタマイズ > デザインCSS に下記を貼り付けてください。
なお既存のCSSカスタマイズがある場合は、そのままでは上手く行かないかもしれませんので、ご注意ください。
/* タイトルビッグ、文字ちょい大きく、画面幅ワイド */ .entry-content { font-size: 19px; line-height: 35px; font-weight: 300; } .page-archive .archive-entries .entry-description { font-size: 16px; line-height: 30px; font-weight: 300; } .page-archive .categories a, .categories a, .categories a:before { color: #aaa; } .page-archive .categories a:hover, .categories a:hover, .categories a:hover:before { color: #333; } .categories { text-align: right; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin-top: 3em; } @media screen and (min-width: 1139px){ h1.entry-title { font-size: 4em !important; line-height: 1.1em !important; font-weight: 600 !important; } .page-archive .archive-entries .entry-title { margin-bottom: 0.25em; } /* ここから画面幅ワイド対応 */ #content { margin-right: 8%; margin-left: 8%; } #container { border-right: none; border-left: none; width: 100%; } #main { width: calc(100% - 290px - 55px); padding-right: 55px; } #box2 { width: 290px; } /* ここまで画面幅ワイド対応 */ } @media screen and (max-width: 1138px) { h1.entry-title { font-size: 4em !important; line-height: 1.1em !important; font-weight: 600 !important; } .page-archive .archive-entries .entry-title { margin-bottom: 0.25em; } #container { border-right: none; border-left: none; } } @media screen and (max-width: 640px) { h1.entry-title { font-size: 2.5em !important; line-height: 1.1em !important; font-weight: 600 !important; } .entry-content { font-size: 19px; } }
以上です!
テーマがもともとレスポンシブ対応なので、スマフォ版の文字調整などもこれだけでOKでした。
さて、次
さて、ここまでやると、標準のSNSシェアボタンのデザインが統一されていなくて気になってきます。
と、Minimalismテーマの記事をよく読むと・・・
シェアボタンを設置する
このテーマには、シェアボタンのスタイルが標準で記述されています。よって以下のコードをデザイン→PC→記事上・下に挿入するだけで、シェアボタンが完成します。
とありました。
「以下のコード」の記載が無いようですが、テーマ作者様の別記事にありそうですね。
また今度、探ってみようと思います。