タイトル未設定

駆け出しエンジニアが興味を持ったことを落書くブログです。

ブログデザインを一新しました

経緯とか

最近Webデザインの勉強をしていて、自分のブログデザインをみたらあまりにひどかったので、ブログテーマから一新しました。

元々使っていた公式テーマ「Bordeaux」は記事と記事の境界線が曖昧なのが悩みで、 いろいろ工夫してみたのですが私のスキルではなんともなりませんでした。

そこで技術ブログっぽいデザインとして公式テーマ「Terminal」を採用しました。

こんな風になりました

Before

f:id:sho-ezawa-dev:20161130110853p:plain

After

f:id:sho-ezawa-dev:20170307151926p:plain

カスタマイズCSS

新しく採用した公式テーマ「Terminal」はデフォルトのままでかなり見やすいと思ったので、 全体の文字色を少し薄くし、記事タイトルのフォントサイズをちょっとだけ大きくした程度です。

/* <system section="theme" selected="terminal"> */
@import "/css/theme/terminal/terminal.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/* Common Parts 
-------------------------------------- */
body, html {
    color: #D0D0D0;
}

.entry-title {
    font-size: 130%;
}

/* Original Index Style 
-------------------------------------- */
.entry-content .ec__link-index {
    text-align: right;
}

.entry-content .hatena-fotolife {
    border: 1px solid gray;
}

感想

今のところ1からデザインすることはまだ難しいですが、 自分でコンセプトを立てて既存デザインを選択・微調整することはできるようになったような気がします。