【はてなブログ】ブログテーマ「Evergreen」を2カラムにする。

1カラム（列）で、記事をゆったりと見ることができるのが魅力の一つである、Evergreenというブログテーマ。確かに、記事をメインとし、すっきりとしたデザインは人気が高いようです。（公式テーマという安心感もあるし）

Evergreen - テーマ ストア

しかし、使い続けると、「やっぱサイドバーあった方が便利じゃね？？」という感覚に陥ってきます。はてなブロガーの記事をみていると、何人かそうゆう方もいらっしゃるようです。私もその状態になりました。

（デフォルトの1カラム時）

（なんか右端がさみしい！）

ですので、evergreenの２カラム化を試みます。

ググってみたところ、そのまんまやりたいことを書いてくださっている！先駆者さまさまです。

今回の参考記事はこちら。
atsushi.hateblo.jp

完全マルコピです！
ありがとうございます。

デザインCSSを変更する

実際に、変更および追加したCSSはこちら

/* <system section="theme" selected="evergreen"> */
@import url("/css/theme/evergreen/evergreen.css");
#main{
float: left;
max-width: 600px;
margin: 0 30px 0 40px;
}
@media screen and (max-width: 1084px) {
    #main {
    float:none;
    max-width: 800px;
    margin: 0 auto;
    }
}
    .page-archive #main{

    margin: 0 20px 0 40px;

    }
    @media screen and (max-width: 1084px) {
        .page-archive #main{
        margin: 0px auto 100px;
        }
    }
    .entry-content {
font-size:17px;
}
.entry-title {
    font-size: 20pt;
}
    
/* </system> */

あっという間に、2カラム化できちゃいました。

（2カラム化）

一見、うまくいっているように見えます。
が、画面キャプチャには写っていませんが、下の方にあるサイドバーにある350 x 200のサイズの広告がうまく表示されていません。。。症状としては、右端が切れています。

つまり、サイドバーの幅をもうちょっと広くする必要が有ります。

サイドバーの幅を調整したい

というわけで、サイドバーの幅を調整する方法を探してみます。そして、ありました。先駆者さまさまさまです！←しつこい？
tkoyama1988.hatenablog.com

直接サイドバーの幅を調整できるようなので、以下のものを追加。

#box2 {
  float: right;
  width: 350px; /* サイドバーの幅 */
}

このままだと、全体の幅にサイドバーが入りきらず、縦型表示のまま、下に追いやられてしまいました。
なので、本文とサイドバーの余白を調整。

#main{
float: left;
max-width: 600px;
margin: 0 20px 0 20px;
}

元々　margin: 0 30px 0 40px;
だったところを
変更　margin: 0 20px 0 20px;
としました。

すると、うまく収まってくれました。
スマホ表示も問題なさそうなので、当面はこの設定でいきたいと思います。

本ブログでの「Evergreen」カスタマイズ集

使いやすいとはいえ、結構クセが強い「Evergreen」ちゃん。
このブログで実施しているカスタマイズ例を参考に記します。
demacassette2.hateblo.jp
demacassette2.hateblo.jp
demacassette2.hateblo.jp
demacassette2.hateblo.jp
demacassette2.hateblo.jp
demacassette2.hateblo.jp