模様替え!
id:platismさんが公開しているテーマ「Mistilteinn」がとてもいい感じ。
これだけでもかなりカッコイイが、色は前のデザインと同じにしたいと思い、少し変更することに。しかしやっていくにつれて欲が出てしまい、ついついデザインCSSの文量が多くなってしまった。いろいろやってみたので参考になるかと思い公開する次第です。
HatenaBlog-Theme/Mistilteinn.css at master · platism/HatenaBlog-Theme · GitHub
上記リンクがブログテーマ「Mistilteinn」のCSS。
色を変える
色が同じ部分を検索してまとめて変更。これだけでもだいぶ違う。
#globalheader-container { color: #fefefe; background-color: #aa3300; } .categories a,.hatena-module-category li a,.entry-header .categories a,.page-archive #main .categories a,.entry-footer .leave-comment-title:hover{ background: #efefef; } .entry-header,.hatena-module-title,.page-archive #main-inner:before,.page-about #main .entry-content:before { background-color:#e3d7b3;/* #2980b9*/ } a.keyword,.entry-title a,.categories a,.entry-header .categories a,.hatena-module-title,.hatena-module-category li a,.page-archive #main-inner:before,.page-archive #main .categories a,.page-archive #main-inner:before,.page-about #main .entry-content:before { color: #333; } .date a { font-size: 80%; color: #454545; }
サイドバー設定
影を抑えめに。
/* はてなモジュール設定*/ .hatena-module-title { /*color: #333;*/ margin-bottom: 10px; border-bottom: solid 1px #ccc; /* background:#e3d7b3;*//*#faf6de; */ } .hatena-module-title a { color: #55a; } .hatena-module-title a:hover { box-shadow: inset 0px 0px 12px #666; text-shadow: 0 0 0px #000; opacity: 1.0; }
検索バー
メニューバーを追加したので、ちょっと上に。カテゴリページへ飛ぶとパンくずリストが上にでてくるので、そのときはさらに上に表示されるようにした。
/* 検索バー*/ .search-module-input { background: #fafafa; } .search-form { position: absolute; top: -130px; } .page-category-category_name .search-form { position: absolute; top: -180px!important; }
※.page-archive-category .search-form
→.page-category-category_name .search-formに変更。
カテゴリ欄
マウスを置いた時に拡大するのをなくして、色だけ変わるようにした。
/* Category Cloud */ .hatena-module-category li a:hover { background: #fdd35c;/*#c73140;*/ -webkit-transform: scale(1,1); transform: scale(1,1); box-shadow: 0 0 0px 0px #999; }
ぱんくずリスト
ちょっと調整。
/* breadcrumb design */ .breadcrumb { margin: 10px auto 0px; }
メニューバー
メニューバーの色を設定。id:sho_yamaneさんのブログのように、背景を半透明にして、追従するようにしてみたい。
/* ヘッダー*/ #top-editarea, #bottom-editarea { background: #fff; font-size: 100%; border: solid 1px #ddd; margin: 25px 0px auto 10px; padding: 15px 25px; }
コメント欄の色
ちょっと変えてみた。影おさえめで。
.entry-footer .leave-comment-title { background: #fff; color: #195caa; border: solid 1px #efefef; padding: 8px 10px; } .entry-footer .leave-comment-title:hover { box-shadow: inset 0px 1px 12px #666; text-shadow: 0 0 0px #000; /*background-color: #efefef;*/ }
最近のエントリ欄のタイトルを省略せず表示
僕の書評記事の場合、タイトルが長く、最後まで表示しないと何の本に対する書評か分からない。
そこで改行をありにして、省略をなしにした。
/* 最近のエントリ改行あり 省略なし*/ .hatena-module-recent-entries li a, .hatena-module-recent-comments li { word-wrap: normal; /* for IE */ white-space: normal; overflow: visible; }
ブログタイトルと説明文の間を改行
検索バーの兼ね合いもあって改行する。
#blog-description { margin-left: 0; display: block; } #blog-title { margin: 50px auto 10px; } .page-archive #blog-description { margin-left: 0; display: block; }
その他、本文中の変更
引用の記号を小さく表示、本文内のリンクは青(#0000ff)にした。
/* entry design */ .entry-content { font-size: 95%; } .entry-content blockquote p { font-size: 100%; } .entry-content blockquote:before { font-size: 300%; color: rgba(200,200,200,1); line-height: 1em; } .entry-content blockquote:after { font-size: 300%; color: rgba(200,200,200,1); line-height: 0; } .entry-content a,.entry-footer a,.page-archive #main .entry-title { color: #00f;/*#3489bd;*/ }
記事の見出しに画像を入れてみた。アイコンはこちらのサイトからいただいた。
.entry-content h4 { background:url("http://cdn-ak.f.st-hatena.com/images/fotolife/k/kyokucho1989/20130822/20130822101733.png"); background-repeat: no-repeat; /* 画像の並び */ font-size: 120%; font-weight: bold; margin: 1em 0 0.5em 0; padding: 2px 15px 0px 40px; border-left: solid 0px #c0392b; border-bottom: solid 3px #aa3300; }
はてなキーワードはPROアカウントにも関わらず、なぜかリンクをはずすことができないので、目立たなくしてごまかした。
a.keyword { color: #333; border-bottom: dotted 0px #ccc; } a.keyword:hover { border-bottom: solid 1px #aaa; text-decoration: none; }
おわりに
まだはてなブックマークウィジェットのデザインCSSと、adsense用のCSSの説明をしてないけど、それはまた今度。