はてなブログのテーマを変更!!このブログも「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; }