wp.Vicuna Ext.でブログのデザイン変えました。

皆さんこんばんわ。長いことブログ更新しておりませんでしたが、ご覧のとおりブログのデザイン変更に夢中でそれどころではありませんでした。

（書きたいことは色々あったんですけど、作業途中で別のエントリーを書いてしまうと、中途半端な状態のままデザイン放置しそうだったので・・・）

PCからご覧の方々は既に二三日前から見た目がガラリと変わったことにお気づきかと思いますが、今日やっとサイドバーのウィジェットとCSSの調整が完了。

念願の左側メインカラムと右寄せ２サブカラムの3カラムデザインを実現しました。

いやー。中央メインコンテンツのいわゆるブログデザインもいいけど、ナウでヤングなWebサイトで多用される、Fパターン視点移動に最適化されたこのレイアウトに前々からあこがれてたんですよね。個人的に大満足です。

前のデザインもそれなりに良かったのですが、レイアウトが気に入らなかったのと、文字の大きさがちょっと小さく思えたり、変なところが英語だったりと、チマチマと気に入らない部分がありましたので・・・

さて、忘れないように、そして誰かの役にたつかもしれないので、簡単な作業レポートをしてみます。

wp.Vicuna.Extをダウンロード＆テストサイトを用意

今回はデザイン変更にあたり、idea×ideaさんのエントリーを参考に、wp.Vicuna.Extというテーマプラグインを利用することにしました。

加えてデザインテスト用に、このサイトでも使っていて、10日間無料レンタル可能なハッスルサーバーで新たにテストサイトを立ち上げました。

今のサイトで色々やっても良かったのですが、デザイン変更作業中は見た目が激しくグチャグチャになったり表示されなくなったり、最悪失敗することも考えられましたので、念のため。（それに10日間のタイムリミットのおかげで作業にも張りがでます。）

テストサイトにワードプレスを入れて、wp.Vicuna.Extをインストールしたら、レイアウトやパンくずリストなど基本的な設定を済ませます。

インストールさえ完了してしまえば、基本設定は管理画面上からサクサクできてしまうので相当便利です。

メインスペースを拡張。500pxから600pxに変更

レイアウトの変更自体はかなり簡単だったのですが、ここで一つ問題が。メインスペースの幅が若干狭く500pxしかございません。

それだけあれば十分かもしれませんが、写真を載せたり、長めの記事を書くには若干せせこましい。

そこで、メインスペースを100px広げて600pxとしました。

あわせてヘッダーの背景画像も1000px版を作成。今回は相当シンプルにつくりました。そのうちサイトのデザインの方向性が決まったらまた変えるかも。

Firebugを使いながらCSSを最適化

この辺はidea×ideaさんのエントリーと同じで、Firebugを見ながら、スタイルシートをカリカリといじります。めんどくさいけどサイトが徐々にキレイになっていくのは気持ちがいいですわ。

全体的にはWeb2.0チックなうっすらさっぱりなデザインテイスト、モノトーンでまとめましたが、あまりに薄すぎても読みづらいので、文字は大きめ、テキストの色は濃い目として、さし色にオレンジを加えました。（idea×ideaさんの色使いを参考に・・・）

テーマカラーの候補にはブルー、グリーンも考えましたが無難にモノトーンに。（服もそうだけど、色で冒険できません。モノトーンな風景。）

全体的な設定が完了して、あとは細かな部分の調整だけとなったらテストサイトでの作業は終了です。

本サイトに適用してプラグインの類を調整

本番サイトにもwp.Vicuna.Extをインストールし、テストサイトの内容をコピーします。

その後、本番サイト独自のプラグインの設定やらサイドバーの設定やらを調整しました。

本当はテストサイトで本番と同じプラグイン実装して調整すればよかったのですが、めんどくさかったので・・・。

リニューアル完了と新プラグインの実装

以上でデザイン変更は完了です。ついでに新しいプラグインを実装しました。

プロフィール表示にiddyを利用

これまでabout meを使ってましたが、若干デザインが浮いていたのと、他のサービスとの連携の面で難があったので、今回はiddyを利用しました。

iddyならデザインもわりといじりやすく、flickrやyoutubeとの連携ができたり、マイページ自体も色々いじれたりするので、今回導入してみました。

Flickrブログパーツを導入

いままで撮った写真をランダム表示するブログパーツです。見た目殺風景になりがちな個人ブログにはいいアクセントです。

そんなこんなでブログのデザイン変更は一旦完了です。

さて！エントリーガシガシ書くぞ！！