Coool.blue、ブログのデザインをTwitter風にリニューアル

シェアする

スポンサーリンク
Twitterデザイン

こんにちは。かわん(@kawan_clb)です。

5日ほどかけて、ブログデザインのリニューアルを行いました。いや〜久々にCSSやらいじってかなり疲れましたよっと。。。まぁ、WordPressテーマ「Simplicity」を使用しながらのカスタマイズだったので、1から作ることを思えばマシってところでしょうか〜

ちなみに僕、過去に会社員 and フリーランスWebデザイナーをしていたので、HTMLやCSSにちょっと詳しいのであります。

スポンサーリンク

コンセプトはTwitter風

ブログデザインのトレンドは、メインとサイドバーの2カラム構成ですよね。当ブログでもそうでした。でもですね、当ブログの場合、サイドバーに載せる情報がほとんど無いと思ったのですよ。

しかもですよ、レンタルサーバは「ロリポップ」を使用しているのですが、いかんせん重い・・・一時は軽くなりましたが、また最近重たくてしょうがない(ロリポップに問い合わせ中)。

そんな経緯から、ブログに表示させる項目を減らせば少しは軽くなるかも?なんて思ってサイドバーを削除し1カラム構成にしました。

「これで軽くなった!イエーイ!!!」

と行きたいところですが、今のところその効果はありません。。。どうなってんだよ、ロリポップさん。いい加減にして下さいよwもうXサーバにお引っ越しするよ、ホントにもう!

ちょっとだけ脱線しました(笑)本題に戻ります。1カラムといえば、モバイル版Twitterが1カラムです。スッキリとして文章が読みやすく僕の好み。僕はモバイル版Twitterのデザインを参考にしょうと思い、ブログのデザインをモバイル版Twitter風にしてみました。以下、パソコン、iPad、iPhoneで表示させた時のブログ表示です。

Twitter風デザイン
Twitter風デザイン
Twitter風デザイン

如何です!?どの端末で見てもほとんど見栄えが変わりませんよね!?ほとんどのブログは、パソコンだと2カラム表示、スマホやタブレットだと1カラム表示にする場合が多いですが、当ブログは全ての端末でほぼ同じ見栄えにしてみました。

Twitter風デザイン

あと、ちょっとしたこだわりがありまして、ヘッダとグローバルメニューのところは透過してます。また見えるかみえないかくらいの線を引いてます。

Twitter風デザイン

また、ヘッダとグローバルナビゲーションは固定してます。下にスクロールしてもヘッダとグローバルナビゲーションが消えることはありません。これは好みが分かれるので、今後設定を解除するかもしれません。

2つほどこだわってますが、全体にシンプル寂しいで気に入ってます。これで完璧な仕上がりではないので、ちょこちょこメンテナンスしていきたいと思います。

スポンサーリンク

シェアする

フォローする