シンプルでスッキリとしたテーマを目指して作りました。
レスポンシブデザインになっており、PC以外にもタブレットでも見やすく表示するようにフォントサイズなど調整しております。
また、トップページ、カテゴリーページ、記事ページ(パーマリンク)、プロフィールページで、それぞれ全体の色が変わるようになっています。
色を変えたい場合
下記のコード内にある「#000000」を好きなカラーコードに変更し、デザインCSSの中に追記してください
/* Home */ #blog-title, .hatena-module-profile .hatena-module-body, .hatena-urllist li a:hover, .leave-comment-title:hover, .pager a:hover, #main ul li a.entry-title:hover, #footer { background-color: #000000; } .hatena-module-search-box .search-module-input:focus { border: 1px solid #000000; } /* Entry */ .page-entry #blog-title, .page-entry .hatena-module-profile .hatena-module-body, .page-entry .hatena-urllist li a:hover, .page-entry .leave-comment-title:hover, .page-entry .pager a:hover, .page-entry #main ul li a.entry-title:hover, .page-entry #footer { background-color: #000000; } .page-entry .hatena-module-search-box .search-module-input:focus { border: 1px solid #000000; } /* Archive */ .page-archive #blog-title, .page-archive .hatena-module-profile .hatena-module-body, .page-archive .hatena-urllist li a:hover, .page-archive .leave-comment-title:hover, .page-archive .pager a:hover, .page-archive #main ul li a.entry-title:hover, .page-archive #footer { background-color: #000000; } .page-archive .hatena-module-search-box .search-module-input:focus { border: 1px solid #000000; } /* About */ .page-about #blog-title, .page-about .hatena-module-profile .hatena-module-body, .page-about .hatena-urllist li a:hover, .page-about .leave-comment-title:hover, .page-about .pager a:hover, .page-about #main ul li a.entry-title:hover, .page-about #footer { background-color: #000000; } .page-about .hatena-module-search-box .search-module-input:focus { border: 1px solid #000000; } /* Tablet用のフッター */ @media (max-width: 1024px) { /* home */ #box2 { background-color: #000000;} /* Entry */ .page-entry #box2 { background-color: #000000;} /* Archive */ .page-archive #box2 { background-color: #000000;} /* About */ .page-about #box2 { background-color: #000000;} }
動作確認ブラウザ
・Chrome
・Firefox
・Safari
・IE8~10
動作確認タブレット
・iPad mini
更新履歴
2013.05.14
サイドバー、コメントなどの表示がおかしかったのを修正
こちらでテーマについての記事書きましたので、よろしければ見てください
http://mono-tone.hatenablog.jp/entry/2013/05/08/233000