ここ(のブログ)は基本的に備忘録なので別にどうでも良いと言えばそうなのですが、それでもさすがに10年以上変わらないデザインではどうしても陳腐な印象があるのは否めません。かといって芸のない芸能人のような派手派手は趣味ではありません。
というわけで、先日からちょっとだけ触ってます。(もうすでに少し忘れつつありますが、備忘録として)
まずは背景に動かない絵をさりげなく入れたい - つまらないことですが、前からやってみたかったんです。
・絵の用意…最初は自前の写真を薄くしたりしてみましたが、どれだけ薄くしても背景全体に入れるのはものすごく目障り。それで、小さいものを右上に入れることに。
・絵の背景の透明化…ちょっと検索してみたところ、大変便利なサイトを発見。これはいいです、素晴らしい。ほとんど何も不満はありません。
・背景に絵を貼る前に、その上に載っているものを透明化…僕のようなド素人には、これが結構分かりづらいです。とにかくstylesheetを理解するしかないのですが、何がどうなっているのか構成をあらましでも読み取ります。ここの場合ではbodyがあって、その上に#containor、#banner、#center、#right というようになってまして、その各々の中に.(ドット)で始まる小項目がまたある、という感じみたいです(違うかも)。
で、一番下のbody以外の、上に載っているものを片っ端から透明化します。具体的には 何とかcolorというところ(で透明にして良いところ)をすべて transparent と書き換え。要するにtransparentいう色に指定するわけです。これは(今さらですが)驚きでしたね。一部はMain Indexテンプレート内でも修正が必要だったんですが、tableの背景色にこれ(transparent)を指定するのもありというのがビックリでした。
・細かい体裁修正…理由が良く分からないのですが、各々の領域の境目に境界線を入れるような設定になってまして、これが結構不細工でしたので消しました。具体的にはborderがあれば、そこを 0px とします。
・背景画の設定…あるサイトのstylesheetからカンニングして、次のように記述しました。これで動かない絵が右上に現れます。
background: #背景の色指定 url(画像のアドレス) no-repeat 100% 0% fixed;
・著作権表示…サイトで探してきた素材、いずれも無償のものなんですが一部は作品のクレジットを表示しろとあります。さてどうしよう、まさか絵のすぐ横に表記するわけにもいきません(不細工)ので…苦肉の策、末尾のPowered byに追記しました。
とりあえず大きな手入れはここまで。あとついでに、ちょっと試しにリンクのアンダーラインを消してみたところ、変更直後はちょっと寂しいかなとも思ったんですが慣れるとすっきりしていい感じに思えてきたので、そのままにしてます。マウスカーソルを乗せたときだけアンダーラインを出すようにしたのも、自分的にはいい感じ。
実はまだ少し問題というか要改善な部分もあるのですが、大勢に影響ないので例によって後回しとなっております。
コメントする