Terrarium

自分だけの花を育てよう この小さなテラリウムで

ブログテーマをカスタマイズしてみた

せっかくなので,ブログのデザインをカスタマイズしてみました.

その手順などを簡単にまとめたいと思います.

1. 元のテーマを決める

最初から各パーツのデザインを全て決めるのは難しいので,あるテーマを元に,それをカスタマイズするという方法をとりました.はてなブログのテーマは,次のページにまとまっています.

テーマ ストア - はてなブログ

この中から,自分のイメージに一番近いテーマを選びます.今回私は

MINIM - テーマ ストア

を選択しました.

2. CSSの追加

設定 -> デザイン -> カスタマイズ -> デザインCSS から,CSSを追記できます.

この作業については下のサイトなどが参考になりました.

shiromatakumi.hatenablog.com

自分のいじりたい要素を探すのには,Chromeデベロッパーツールなどを使いましたが,少々面倒でした.後になって見つけたのですが,次のサイトにどの要素がどのような名前かがまとまっているので,参考になりそうです.

www.yukihy.com

3. フォントを変える

せっかくここまでカスタマイズしたんですから,フォントもデフォルトでなくカッコ良いものに変えちゃいましょう.

私は次の2つのサービスを使いました.

  • TypeSquare:無料で使える書体は1つだけだが,モリサワの高品質の書体を使える
  • GoogleFonts:Googleが提供している様々なフォントを使用可能

typesquare.com

fonts.google.com

このブログでは,タイトルにLato,本文にUD新ゴ,見出しにM+を使っています.

(3/16追記:見出しもUD新ゴになりました)

設定方法などは,次のサイトが参考になりました.

brian.hatenablog.jp

おまけ

自分のCSS構成例を置いておきます.基本的には,フォントと色の設定ですね.

最後の@media以下については,iPhone5Sへのレスポンシブ対応のためで,詳細はそのうちまとめる予定です.

/*  */
@import "http://hatenablog.com/theme/10328749687194646740.css";
/*  */
/* Responsive: yes */

#globalheader-container {
    color: #333;
    background: #fff;
}
body {
    background-color: #fff;
    font-family: "UD Shin Go Light";
    letter-spacing: 1px;
}
#title {
    font-family: "lato",sans-serif;
    font-style: normal;
    font-weight: 200;
}

.entry {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    transition: box-shadow 0.2s;
}
.entry:hover {
    box-shadow: 0 0 20px rgba(0,0,0,.15);
}

.hatena-module {
    border-radius: 10px;
    transition: box-shadow 0.2s;
}
.hatena-module:hover {
    box-shadow: 0 0 20px rgba(0,0,0,.1);
}

h1, h2, h3, h4 {
    font-weight: normal;
}

a,
a:link,
a:visited,
a span {
    color: #660066;
    font-style:normal;
    text-decoration:none;
}
a:hover,
a:active {
    color:#CC00CC;
    text-decoration:none;
}

@media (max-width: 960px) {
  #content {
    margin: 0 auto;
    width: 100%;
  }
  #main {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
  #main-inner {
    max-width: 95%;
    margin: 0 auto;
  }
  .pager {
    margin-left: 10px;
  }
  #box2 {
    max-width: 100%;
    width: 100%;
    display: block;
  }
  #box2::after {
    content: "";
    display: block;
    clear: both;
  }
  #box2-inner {
    margin: 0 auto;
    width: 95%;
  }
}