はてなブログテーマ「Mistilteinn」を魔改造してみた。

模様替え！

　id:platismさんが公開しているテーマ「Mistilteinn」がとてもいい感じ。

※ミクさんはテーマに付属しません＞＜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;*/
}

記事の見出しに画像を入れてみた。アイコンはこちらのサイトからいただいた。

Blog, Freebies | Icojam - sweetest free &

.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の説明をしてないけど、それはまた今度。

マトリョーシカ的日常

ワクワクばらまく明日のブログ。