ブログデザインを変更しました

やらなきゃなーと思いつつ放置していたデザインを変更してみました。

変化

PCブラウザでの表示
header
design-update-header-before

footer
design-update-footer-before

header
design-update-header-after

footer
design-update-footer-after

iPhoneでの表示
design-update-iphone

SNS系のリンクをアイコンフォントで作成

一番ぱっと見わかる変化はこれでしょうか。今までSNSのリンクは後で何か作ろうと思ってナヴィゲーションに入れるという荒技で適当に設置していたのですが、最近アイコンフォントなどという、とてつもなく便利な物を知ったので導入。Fontelloというサイトを使いました。

フォントを変更

ナヴィゲーション、記事タイトルの英語、フッターのコピーライト表示のフォントを変更しました。フッターのはかわいげもあって中々好きでした。ちなみにGoogle Fontsを使っています。

ナヴィゲーション: Rokkitt
記事タイトル: Cardo
コピーライト: Cookie

よりヴィンテージ感を出していきたいですが、日本語が入ってしまうとどうにもこうにも難しそうです…でも可能な限りの所まではやって行きたいです。今回変更したフォントはどれもタイプで特にCardoが好きでした。WがVとVをちょっとずらして重ね合わせたみたいな感じになるのが良かったです!

トップに戻るリンクを右下に

しばらく下にスクロールすると右下にトップに戻るリンクが出るようにしました。jQueryとCSSで実装する一般的なやつです。

あんまり右下とかにいきなり出すのは好きじゃないけどこれくらいならいいかなと。たまに関連記事とか結構大きめな要素が右下から出てくる時あるけど僕は嫌いです。だっていかにもこの地区に住んでなさそうな外国人女性が「ヘイ!私も今その地区にいるの!今晩私と遊んじゃえばいいじゃない!?」的なチャット風なやつが現れるのを思い出させるからです。

まとめ

それはさておき、早く本番の環境に反映させたくてブラウザはChrome, FireFox, Safariの新しめのブラウザの動作しか確認してません。微修正はまた徐々にやっていきたいと思います。

コメントはお気軽にどうぞ