【はてなブログ】ブログテーマを『Written』から『Evergreen』に変えて、ちょこっとカスタマイズ。

　昨日まで使っていたブログテーマ『Written』
f:id:demacassette:20160301235554p:plain
少しずつCSSとかをいじって、テーマカラーを好きな色にしてみたりグローバルメニューを設置してみたり、引用や見出しの設定も変えてみたり、と、自分なりのイメージに近づきつつありました。

でも、何かが足りない？いや過剰だなぁと思っていたのです。それは、、、

2カラムは見にくい！！
サイドバーっていろんな情報を掲載できるんですけど、もはや私にとっては邪魔です。というわけで、シンプルな1カラムのテーマに変更することにしました。選んだブログテーマは『Evergreen』です。これも公式テーマなので安心感はあります。（なんの？）

※テーマを変更すると、設定していたCSSや htmlが無くなる場合があるので、メモ帳などへのバックアップは忘れずに！！

テーマを変更した結果↓
f:id:demacassette:20160301235909p:plain

雰囲気変わっちゃったー！！

さっそく、『Evergreen』でのカスタマイズ事例を調査！

www.fair-skinned-monster.com
t9m.info
potex.hatenablog.com

記事タイトルについていじった参考
youym014.hateblo.jp
www.yukihy.com
matoyomi.hatenablog.com

まずは、謎の二重線の除去

/*エバグリ臭さを消す*/
.page-archive #main,.entry,#blog-title{background:none;}

これで消えるっぽい。

次に、タイトルの位置が下すぎるので調整します。

/*ブログタイトルの位置*/
#blog-title{
    text-align:center;
    height:80px;
    padding:0;
    margin-bottom:0;
}

heightはタイトルの高さ、margin-bottomはタイトル下の余白みたいです。やりながら適当に調整しました。試行錯誤です。

次に、これはテーマを変えたからというわけではないのですが、フォントがいまいち読みにくかったので変更してみました。デザインCSSに加えたのは以下です。

p,h1,h2,h3,h4,h5,body,blog-title,title.entry-title.entry-content{
font-family:'PT Serif', serif;
}

実はこれだけではなくて、head要素にフォントに関する情報を追加しないと反映されません。しかも、若干サイト自体が重くなります。Googleフォントを読み込んでいるからかな？詳しくは以下のサイトをご参考に。
www.yukihy.com

最後に、フッター部分の余白が多かったので、フッターを消してみたり、ついでに画像に黒枠をつけてみたり、記事タイトルが見にくかったのでちょこっと修正しました。

/*フッター部を削除*/
.page-index .entry-footer{
    display: none;
}

/*画像に枠をつける*/
.hatena-fotolife {
    margin: 0 auto;
    display: block;
    border: 1px solid black;
}

/*記事タイトル修正*/
.entry-title{
    font-size:150%;
    padding: 10px 15px;
    /*border-top: 1px solid black;*/
    border-bottom: 1px solid #008b8b;
}