ブログデザインを変更しました(更なるヴィンテージ感を目指して)

そろそろデザインの方も改善して行こうと思いまして、気になっていた部分を直したり、やりたかったことを実現してみたりしました。

基本的にはwordpress既存のテーマであるtwentytwelveのカスタマイズですが。それにしてもtwentytwelveのテーマはシンプルで自分好みだったのもあるし、とにかくレスポンシヴデザインなのがたまらない!自分で一から作ってたらなかなか時間がかかるのでtwentytwelveは利用しない手はありませんでした。

デザインの方向性

とにかくヴィンテージなデザインな私ですので(tumblr参照)よりヴィンテージ感を目指して行きました。でも今の所絵を書いたりとかいう予定はないので、全てはCSSでなんとかしてやろうという作戦です。

ワタクシ、仏像や寺など古風なものが好きでありつつも最新のガジェットなども大好きなので、ヴィンテージでありつつもモダンな感じもどこかで出したいななんて思っております。

色や配置や要素のなどはヴィンテージ風で。でも結局それを実現するのはCSSになってくるので、それでどこか若干のモダン感が出てしまって、フラット感がでているような気がしないでもない。

今回の主な変更

design-before

design-after

今までは見た感じtwentytwelveのテーマは使ってるんだなっていうのがぱっと見ですぐわかった感じだけど、今回は前よりはそこから離れられたかなと。

やっぱりナヴィゲーションのメニューに色を付けたのがなかなか前と見た目がかなり違って新鮮。それに今まで全体的にぼやけた色の印象があったから(好きでそうしてたのもあるけども)、濃いめの色を一色入れるだけでもずいぶんとシマリが出た。若干細めにしたのもポイント。

本当は#000で真っ黒の色でもいいかなと思ったけど、その勇気が無く、今の所は若干のグレーのような紺のような色にしてあります。飽きたら真っ黒になるかも。やっぱり真っ黒を使うというのはよほどの何かがない限り戸惑っちゃう。でもそこでバシッと黒を使えるような男、憧れます!

あとはトップページの個別記事の一覧はよりシンプルにわかりやすく。ホバーでその記事を強調する背景色変更のアニメーションを入れたり。やり過ぎ感もあるけどあるけどどうもやってみたくて!

ということでちょっと触っただけであんっ…といった反応が返ってくるような若干の敏感デザインになっておりますが、小豆を箸でつまんでお茶碗に入れるゲームをするくらい暇な時はぜひ遊んでみてください。でもコンピュータのあんっ…は嘘のことがないから安心ですね!

ブラウザはモダンなやつじゃないとだめなはずです。IEは知りません!ごめんなさい!でも新しいのなら大丈夫なはず!

変更点

  1. 全般系
    • リンク系のホバーにアニメーション(やっぱりリンクはふわっと色が変わった方が綺麗なので)
    • ヘッダー系はテキストを中央寄せ(ヴィンテージ感といったらセンターアライン)
    • コンテンツとサイドバーの間に区切り線(前より見やすくなるかなと思って)
  2. ナヴィゲーションバー(メニュー)
    • 帯風に、色もつけた(全体的にもしまりが出るかなと)
    • 要素のホバーでふわっとした感じのアニメーション(割とお気に入り)
  3. メインコンテンツエリア
    • トップページの個別記事紹介のホバーでその記事の背景色を強調するアニメーション(やり過ぎ感もあるけどアニメーションさせたくて)
    • 「コメントをどうぞ」はトップページには表示させない(まだ記事読んでないのにコメントする人もいないし)
    • 小見出しのヘッダーにも下部にボーダー(左ボーダーの見出しはありきたりで嫌いだし下部の方がかっこいい)
    • 「続きを読む」を四角にしてより見やすく押しやすく(ヴィンテージでありがちな囲い法)
  4. サイドバー
    • サイドバーのリストには下部にボーダー(今まで区切りがわかりずらかったので)
    • 幅を若干広く(今まで狭かった)
  5. 著作権表示(ブログの最下部)
    • 既定の「powered by wordpress」じゃなくてちゃんと自分用に(なんか様になってきた風)
  6. 意味があるかわからない系
    • ブログの最上部と最下部に少しの幅のボーダー(全体的に要素系の区切りを少なくしたブログデザインにしてるので、ちょっとシマリを出すため)

万が一検索エンジンからきてくれた場合

twenty-twelveをカスタマイズしたくて、これどうやるの!的な質問などありましたらお気軽に!!

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