はてなブログのテーマを変更！！このブログも「Rouge」にしてみた！！

自作でデザインCSSを書いていましたが、なんか無駄に重くなってしまったので、テーマを変更しました！（CSSが問題というわけでは無かったのですが。）

シンプルでレスポンシブ！

しかし、このブログではちょっと変更したいところもあったので一部変更。

変更点1：ブログタイトルを小さく

このブログのタイトルは、あまり意味もなく、強調するところでは無いので、小さくしました。（参考までに追加したCSSです。）

h1#title {
    font-size: 200%;
}
@media (min-width: 737px) and (max-width: 1024px) and 
(orientation:portrait) {
    #blog-title-inner h1#title {
    font-size: 200%;
    }
}

1行だけでは変更できないね。レスポンシブで細かくフォントサイズも変更しているので。

変更点2：サイドバーにアイコン追加

シンプルさを目指して、サイドバーに目が行くようなものは置かないデザインなのですが、このブログではサイドバーも見て欲しいので。

サイドバーのそれぞれのタイトルにアイコンを付けました。 

.hatena-module-title:before {
font-family: FontAwesome;
font-size: 1.5em;
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hatena-module-profile .hatena-module-title:before {
content: "\f007";
}
.hatena-module-search-box .hatena-module-title:before {
content:'\f002'
}
.hatena-module-links .hatena-module-title:before {
content:'\f0c1'
}
.hatena-module-recent-entries .hatena-module-title:before {
content:'\f005'
}
.hatena-module-archive .hatena-module-title:before {
content:'\f187'
}
.hatena-module-entries-access-ranking .hatena-module-title:before {
content:'\f091'
}
.hatena-module-category .hatena-module-title:before {
content:'\f02c'
}
.hatena-module-recent-comments .hatena-module-title:before {
content:'\f086'
}
.hatena-module-circles .hatena-module-title:before {
content:'\f0c0'
}

変更点3：コードの表示を変更

スクリプトなどのコードを表示する場合のデザインを、このブログに合わせてモノクロにしてみました。

（参考までに追加したCSSです。）

.entry-content pre {
font-size: 70%;
color: #fff;
background-color: #666;
}