作り直した

そもそもこのblogの目的は、自分のメモ、しかも節操無く。
なので乱雑という名前にした。

乱雑な様をデザインとして形にしようと試みた結果がnormal(現grunge)で、これが最初に出来たデザイン。
普段やらない方法をあえて使って構築しようと決めて

  • 背景画像を3層にして%配置、ブラウザのサイズによって重なり具合が変わる、同じものなどないのだ
  • position:fixedを使って乱れない事で逆に全体を乱す様を表現
  • ie7以下を対象から外す、商用だと出来なかったのと自分用メモなのでieは必要なかった

他にも色々やったけども、そんな感じで作った。

しかし自分の為用のメモブログなのに、自分が見づらいよコレ、という結果に。
そこでもうひとつのデザインsimpleを作成。
縛りは、画像を使わない、あと自分が見やすいように工夫する。

そしてデザインが二つになり、選択できるようにと方法を探すと
テーマを切り替えてcookieに保存するプラグインと
cssを切り替えてcookieに保存するjQueryを発見。

デザイン2種類の時

そこで検討した結果、基本のphpは変えずにcssだけで見た目を変更するcss zen garden方式(なつかしい)で行くことにする。

そうこうしてると、「Webデザイナーなのにデザインしてないじゃないか?」と知人から突っ込みが入る。
なに言ってますのん、むっちゃくちゃデザインしてるちゅーの、導線とか。
「素人からみると、目立つ画像を加工して配置してないとデザインしてないのと同じ」と切り捨てられる。
えー、あー…

という流れで3個目デザインを作る。
意味のないキャッチ画像など、花は華でも枯れた花だという意味で、ツタを絡ませてみたのが、x-ran-zatsu(現dying-flower)。
IE6にも対応した(simpleも対応してるけど敢えて表示させてない)。
酷い言い様だけども、それなりに考えてちゃんと作ったつもり、
その上でタイトルとカテゴリなんかの並び等細かい修正をした為、新しいテーマとして作る。

するとどうだろうデザインとコーティングであわせて1日とちょっとで出来た。
wpに慣れてきたのか、新しいテーマで過去に囚われずに出来たのがよかったのか、両方か
あとは流用するところは流用したのも大きいですけど。

枯れた花だけどまだ死んではいないよ、と言いたくなって
漢字の乱雑を動脈と静脈の色を意識して奥に配置したりしてみると、
ヘッダ画像をランダムで表示したくなったので、以前のエントリーで書いたようにphpを追加する。

一応完成したけれど以下の画像のような困った状態になってしまった。

3種類になって

x-ran-zatsu(現dying-flower)からsimpleとnormal(現grunge)を直接選べなくなったのと、
ran-zatsuとx-ran-zatsuの変更はプラグインを使っていて、ウィジェットはサイドバーにしか置けなかったので
デザインを変更する場所があっちにもこっちにある状態になった、これは良くない、ぜんぜん良くない。

なのでまた考える

  1. 2つになったテーマを1つにしてcssで3つのデザインを分けるか(最初の方式)
  2. simpleとnormal(現grunge)を分解してそれぞれのテーマに変更、3つのテーマにしてテーマの変更でデザインを分けるか

cookieの挙動がなんだかおかしくなってきたのと、使うjsを切り替えたくなったり、無理にieを弾かなくてもいい時もあるのと、サイドバーを追加してウィジェットをカテゴリーなどど分けて使えるように出来たので
テーマ自体を切り替える方法にチェンジする。
simpleとnormal(現grunge)を分解する事になるんだけど、簡単かと思っていたら結構手間が掛かった、でもまぁ出来た。
もうnormalではなくなってしまったので新しい名前をつけることにした、グランジだ。
x-ran-zatsuも最初の意味に戻す。

そして下記の画像みたいになった。
分割して再構築

テーマの追加が簡単になると、別のデザインもしたくなってしまうんだけど
これで問題が無くなったわけじゃないのが悲しいところ
テーマを切り替えると、indexに戻ってしまうのです。

ポートフォリオを見ていても、テーマを変更するとindexに。
これはどうしたらいいのかな、 常に今見ているurlをどっかに保存してテーマを変更するときに参照させたりする?出来る?わかんない。

とりあえずそういう事で、見た目はあんまり変わってないけど全面リニューアルなんですよ。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.