いつかギャフンと言わせたい

平凡な会社員が、いつか周りをギャフンと言わせるための自分記録ノンジャンル記録。

【はてなブログ】ブログテーマを『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;
}

これはおまけですね。とりあえずのEvergreen(通称:エバグリ?)カスタマイズを終えて様子を見ることにします。

結果、こんな感じ。
f:id:demacassette:20160315003402p:plain


誰かの参考になれば幸い。(って、自分は人のを参考にしまくってるくせに、、、すいません)