ottatiのブログ

無職学生がネットにクソアプリをまき散らしていく様子

ブログのデザインを変えました!

f:id:ottati:20150103125718g:plain     🍣

そろそろ前のデザインにも飽きたのでデザインを変えることにしました。PCから閲覧した時は以下のような感じになっています。

f:id:ottati:20140917133841p:plain

前のデザイン(スクショを撮り忘れた)よりも「楽しい感じ」が表現できたと思います。。

はてなブログ テーマストアでいいのを見つけました

テーマ ストア - はてなブログではユーザが投稿したはてなブログのテーマが紹介されています。ちなみに更新頻度はかなり低いです。

僕は人気のテーマパネルで2位だったテーマに一目惚れしました。

f:id:ottati:20140917134110p:plain

テーマ名は「Pathbook」です。現時点で324インストールでした。

Pathbook - テーマ ストア - はてなブログ

早速インストールしました。

デザインをちょっと変更しました

なるほどヘッダーの背景色はsampleでは黄色っぽい色でしたが、デフォルトでは真っ白でした。なので「デザインCSS」に頑張ってCSSを書き足すことにしました。

メニューバーの背景色を変更しました

  • メニューバーの文字色は白
  • メニューバーの背景色は白

なにも見えません。なので以下のようにして背景色をオレンジ色に変更しました。(ちなみにHacker Newsのメニューバーの背景色と同じ色! :p)

#globalheader-container {
    background-color: #ff6600;
}

ヘッダー画像周辺を変更しました

上部に30pxの余白をもたせ、横幅を100%にしました。

#blog-title-inner {
    margin-top: 30px;
    width: 100%;
}

画像をホバーした時の処理を変更しました

画像をホバーした時に画像を小さくするようにしてあったので、無効にしました。透明度も一定にするようにしました。

.entry-content img:hover {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -transform: scale(1);
    background-color: #fff;
}

ヘッダー画像を新しく描きました

昔のヘッダー画像は「ブログ名はあのねノート。」ということしか伝わっていなかったので、情報を沢山つめこみました。パッと見て「なんかつくってんのかな」ということが伝わればいいなあ。

PC用

f:id:ottati:20140917135522p:plain

モバイル用

f:id:ottati:20140917135529p:plain

さいごに

あと3ヶ月半で2015年。。