デザイン変更
経緯
最近、誠に僭越ながらサークルの後輩にWeb系の講習会なぞやっております。
RubyでFizzBuzzなどをやらせていたところ、そろそろHTMLとCSSをやれとの要望がありました。
let bootstrap beを座右の銘とする私ですが、最近流行りのゴーストボタンなどについてもちょっと扱っておきたいところ。
どうせだし、ということでPC版ブログのデザインを弄ってみました。
現状の不満な点
今のままでもいいっちゃいいのですが、いくつか気になる点がありました。
- 読者になるボタンちっちゃい
- twitterも横長は押しづらそう
- コメントを書くボタンが、広告と一体化しててコメント書きたくなくなる
- 弄った方ががんばってそうでよさそう
テーマ選定
はてなブログはテーマがいい意味で「ブログ」感しなくて良いですね。チラッと覗いたところ、livedoorなどは往年の(?)ブログっぽいデザインが多い印象です。
いくつかテーマを眺め、
- DUDE
- Vancouver
の2つがナウい感じで良さげでした。
比較してみます
DUDE
良いところ
- いきなりゴーストボタン
- jumbotronが素敵
- アイコンが可愛い
惜しいところ
- ブログタイトルが日本語だとせっかくの美味しいところが勿体無い
- リストに何故borderを
- Twitterアイコンそんな動かんでいい
Vancouver
良いところ
- 最近のメトロっぽい太字太線
- ヘッダーをCAAD12で染めたい
- サイドバーの吹き出しがオシャレ
惜しいところ
- 日記書くようなブログには合わない……?
- span(strong?cssみないと)に下線付くのは個人的にウーン
- かなりセンスがないと残念な感じになりそう
結論
DUDEにしました
理由は、手入れすればわりと自分好みのデザインに染められそうだったからです。
デザインの選択理由を言葉で説明する、というのは五輪のエンブレムの際にも難しいなあと思いましたが、実際に書いてみると様々な媒体で使用するようなエンブレムの場合、媒体特有のメリットで絞り込むこともなかなかできないので、より後付けっぽいorコンセプトに着目した理由になりがちなのでしょう。
カスタマイズしてみる
実際に弄った点を羅列してみます。
全体的なデザイン
- ブログ・記事タイトルの文字間を広げる
- 背景色をグレーに
- とりあえず上の2つやっとけばオッケーみたいなとこありますよね
- ヘッダーをシンプルに
- 画像用意するまでの我慢です
- テーマカラーをグレー系に
記事部
- コメントを書くボタンのmargin調整、ゴーストボタン化
サイドバー
- サイドバーにsocialを追加
- ついでに全部英語に
こまごまとしたもの
- リンクのアンダーバー削除
- リストの囲い削除
こんな感じです。
今後は、
- Amazonリンクのカラム落ち
- 撮影次第ヘッダーに写真追加
をしたいと思います。ヘッダーの写真をランダムに表示とかやりたいのですが、そこだけjQueryとかできるのでしょうか。最悪外部にRailsでAPI立ててこういい感じにすればウーン。
うおおめっちゃ意識高い記事書けた
さて、明日ついにちょっと長めのライドに行ってきます。とは行っても往復60kmちょいですが。
パンク用品は揃えましたが、不安ですね……。生きて帰れたら報告します。