読者です 読者をやめる 読者になる 読者になる

中央線に乗って考える

好きなモノとか、欲しいモノとか、日々のこととか

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

Technology Technology-Web

自作でデザイン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;
}