いつかのぎゃふんのために

いつか誰かをぎゃふんと言わせるまで、RやQGISを使ったデータ解析や本や映画のレビューを書き記します



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

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

f:id:demacassette:20180118015157p:plain
Evergreen - テーマ ストア


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

(デフォルトの1カラム時)
f:id:demacassette:20180118020143p:plain
(なんか右端がさみしい!)

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



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


今回の参考記事はこちら。
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カラム化)
f:id:demacassette:20180118015901p:plain

一見、うまくいっているように見えます。
が、画面キャプチャには写っていませんが、下の方にあるサイドバーにある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