shibomb eats weird things...

and out something.

Minimalismテーマカスタマイズ タイトルビッグ、記事文字ちょっと大きく、画面幅ワイド

はてなブログをはじめて最初に悩んだのがテーマ選択でした。
柄にもなくシンプルで余白の美しいモノが好きなので、そこで選んだのがこれです。

hitsuzi.hatenablog.com

ほんと、シンプルで美しいですよね!

デフォルトでもこじんまりオシャレにまとまっているので、そのまま使えるのですが、ちょっとだけ好みにカスタマイズしてみました。

下記のような好みの方のご参考になれれば幸いです。

  • タイトルをドーン!とビッグに!
  • 記事の文字をもうちょっと大きく、でも主張は少なく!
  • カテゴリ表示部分は記事の本質ではないので、存在を薄く・・・
  • 横幅は画面幅いっぱい使いたい!

デザイン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→記事上・下に挿入するだけで、シェアボタンが完成します。

とありました。
「以下のコード」の記載が無いようですが、テーマ作者様の別記事にありそうですね。

hitsuzi.hatenablog.com

また今度、探ってみようと思います。

© shibomb. All Rights Reserved.