読者です 読者をやめる 読者になる 読者になる

はてブロテーマ『Evergreen』を色とかカラムとかカスタムする

Computer

f:id:yukk_laz:20170212181602j:plain

オシャレだけど、みんな使ってて量産型っぽい公式テーマ『Evergreen』を、色々カスタマイズしたい人向けに書き残しておきます。

エヴァグリホリックなはてなーがすでに色々作ってくれているので、ほぼエントリ紹介です。また、結構ゾウモツをいじくり倒すので、読みづらいかも。

 

 

 目次

 

機能を追加する

2カラムにする

1カラムだといっぱい表示できるけれども、サイドメニューが全部下に行ってしまうので不便です。

上記エントリはレスポンシブ対応、画面が大きい時は2カラム、小さい時は1カラムというステキカラムです。

 

ページトップボタンを設置する

下まで読んだら上に戻るボタンを設置するエントリです。CSSなしでも動きますし、他のボタンを設置したい場合、#pagetop、#pagetop:hover、#pagetop:afterあたりを書き直してやればOKです。

 

デザインを変更する

続きを読むボタン

『続きを読む』は、トップページをだらだら眺めてもらうのに便利ですが、エヴァグリのはちょっと見づらいので、それを差し替えるエントリ。

 

文字色・ボーダー色

『(自分のブログのURL)/css/theme/evergreen/evergreen.css』にCSSがあります。

このファイルの『#47a89c』『#3bb4a5』『#59c9bb』『#64beb3』『#88cdc4』が、エヴァグリで使われている緑色です。これを好きな色に差し替えましょう。

 とりあえず全部紫色に変えてみるとこんな感じ。

a, .date a, .entry-footer-section a, .pager a:hover, .page-about dt, .hatena-urllist li a:hover,
  .hatena-module-profile .id a:hover, .page-about dt, .entry-footer-section, .entry-footer-section
{
    color: #af3bb4;
}
.hatena-urllist li a, .hatena-module-profile .id a, .pager a:hover
{
    border-bottom: 1px dotted #af3bb4;
}
.leave-comment-title, .page-archive .categories a, .page-archive .categories a:hover
{
    background: #af3bb4;
}

 

画像

先ほどのCSS内にある『/css/theme/evergreen/images/』を検索してやると、二重線、アスタリスク、タグ、引用のアイコンと、Retina用に二倍拡大してあるアイコンで計8つ見つかります。

『(自分のブログのURL)/css/theme/evergreen/images/tag.png』などのようにしてやってダウンロードし、色を適当にいじって、フォトライフにアップロード、アップロードした画像にURLを差し替えなおせばOKです。

 

わたしのブログに上げている紫色バージョンのコードがこちら。

/* 画像差し替え(PC) */
#blog-title 
{/* エヴァグリ二重線 */
    background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173326.png) no-repeat;
    background-position:bottom;
}
.entry
{/* アスタリスクボーダー (エントリ) */
    position:relative;
    margin-bottom:100px;
    padding:0 0 112px;
    background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173324.png) no-repeat;
    background-position:bottom;
}
.page-archive #main
{/* アスタリスクボーダー (アーカイブ) */
    margin:0 auto 100px;
    padding:0 0 112px;
    background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173324.png) no-repeat;
    background-position:bottom;
}
.categories
{/* カテゴリアイコン */
    margin:20px 0 0;
    padding:0 0 0 17px;
    text-align:left;
    background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173330.png) no-repeat;
    background-position:left 5px;
    font-size:94%;
}
.entry-content blockquote
{/* 引用アイコン */
    background:#f7f7f7 url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173328.png) no-repeat;
    background-position:40px 25px;
    margin:0 0 10px;
    padding:75px 40px 40px;
    color:gray;
}

/* 画像差し替え(メディアクエリ) */
@media (-webkit-min-device-pixel-ratio:2)
{/* Retina Display */
    #blog-title
    {/* エヴァグリ二重線 */
        background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173327.png) no-repeat;
        background-position:bottom;background-size:70px 8px;
    }
    .entry
    {/* アスタリスクボーダー (エントリ) */
        background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173325.png) no-repeat;
        background-position:bottom;background-size:60px 12px;
    }
    .page-archive #main
    {/* アスタリスクボーダー (アーカイブ) */
        background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173325.png) no-repeat;
        background-position:bottom;
        background-size:60px 12px;
    }
    .categories
    {/* カテゴリアイコン */
        background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173331.png) no-repeat;
        background-size:10px 10px;
        background-position:left 5px;
    }
    .entry-content blockquote
    {/* 引用アイコン */
        background:#f7f7f7 url(http://cdn-ak.f.st-hatena.com/images/fotolife/y/yukk_laz/20170212/20170212173329.png) no-repeat;
        background-position:40px 25px;
        background-size:45px 35px;
    }
}

 

元のコードをそのまま引っ張ってきて、URLを差し替えただけです。

 

紹介したCSSまとめ

f:id:yukk_laz:20170212195003p:plain

以上をすべて盛り込んだCSSを置いておきます。ページTOPボタンがあれば、それも差し替わります。中身をデザインCSSにコピペすれば、上の画像っぽくなります。

 

https://1drv.ms/u/s!Am5NkzwhvE4qtjyXfaJ42A34bp-d

なお、このCSSにあるコードおよびアップロードされているEvergreenのアイコン画像の権利は各エントリ筆者、Evergreen作者、引用元の権利者に帰属するものとします。

 

 

 

色が変わるだけでも、ガラリと印象が変わって楽しいです。レッツ・エヴァグリ。

そんな感じです。