覚え書き、まとめて

※このサイトはランナーやろう者(とその&周辺)が多いようなのだけれど、以下は、ブログ作業の作る側(裏側)のオタク的記述が多いので、興味のない方は読み飛ばしてください。

3月10日頃 トップページ左右分割

トップページのカテゴリー分類中、<WHAT'S NEW>以外の下部部分を左右に分割。前のホームページと似たスタイル、で元々、こうしたかったつもりのもの。

ホームページの時はトップページのみ横長レイアウトだったが、今回は全ページの左右幅を揃えるべくトップページも縦長で。

3月17日 ページの両端にシャドウをつける

ただのラインでもいいのだけれど、これを付けるとぐっと引き締まって見えて、いい感じ。ホームページの時もそうしていたけれど、今回は自分でドットをひとつずつ打った画像を自作。

ただ、Firefoxで作業して、それに合わせて作ってしまったら、IEではちょっと左のシャドウが1px分くらい少ない・・・。わずか1pxくらいではあるけれど、せっかくの労作が気になる・・・。

ブラウザ仕様の差異は消しているつもりでも、IEは特にpadding属性がどうとら・・・というのをきいたことがある、そのせいだろうか?

最近、全くIEでは見てなかったが、このサイトの閲覧比率もまだまだIEが8割のようなので、やっぱり作るときはIEでのチェックを忘れずにしておかないと。両端シャドウも単純なように見えて、もう一度、作る気力ないし。

※IEでご覧の方、是非、Firefoxをお勧めします。

3月21日 見出しに画像

<迷える子羊のつぶやき>のh2見出し(=本文中の小見出し)に葉っぱの画像を付ける。ずっと以前からやりたかったこと。影をぼかして付けたつもりが、あまりぼけては見えないけれど、ひとまず、だいぶ印象は違ってきた。

葉っぱというより、スナフキンの帽子みたい。

本当はこの見出しも、ヘッダ上部の写真画像もカテゴリごとに替えてやりたいけれど、とりあえず今は併用、流用。

3月22日 トップページの見出しにも

前日の葉っぱ画像第2弾。メイプルリーフの画像をトップページ見出しのアクセントにしてみる。メイプルリーフもかねがね温めていた構想。

自分でも面白かった作業過程――。

普通、材料はネット上の無料画像を取ってくるか、前日のは写真画像を加工したのだけれど、今度のは・・・。

この日、何気なく新聞を見ていて、メイプルシロップの(しょっちゅう掲載される例の)広告に目がとまり、「これでいこう」とスキャン。カナダの国旗部分でもよかった。

画像回転して葉っぱを右斜めに。色は赤→緑に。サイズも適当に縮小。緑なだけでは面白くないので、グラデーションをかけていい感じに。影も同じように付ける(が、どうもぼかしがうまく出ない。もっと思い切りぼかした方がいいのか・・・)。

これまでのトップページ

緑色が、偶然、上の山の写真の色合いとも通じて、おさまりがいい。山の写真(スイス)は、「とりあえず」のつもりで置いただけが、今に至っているのに。書きながら今、思いついたが、赤と緑、クリスマスカラーの2つをつくって交互に配するのもいいかも。

レンタルブログのように、余裕があったら、季節バージョンで衣替えできそう。

黄色い背景グラデーションが消えたけれど、これも今度、時間のあるときに画像をドッキングさせてやりたい。

ともあれ、ホームページの頃から、画像は極力使わず、シンプルなテキスト+CSSでもレイアウトは充分、と思っていたけれど、やはり画像を効果的に使うと違ってくることを実感。



 

  Related Entries


Message

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