REDLINE MAGAZINE | [B]RLMの作り方・その３-１

[B]RLMの作り方・その３-１

今回は左のメニュー部分なんですが、なんかココ、敢えてややこしい事をしている気がするので初心者向けのカテゴリに妥当かどうか微妙なところ、なのでややこしいんじゃボケーという方はスルーで･･･。

ややこしい所とは何かの巻

どうしてくれようかと考えたのは左の図で赤い四角で囲ってる部分。「最近のエントリ」や「カテゴリアーカイブ」などの各リンクを囲っている薄い青色の枠に花というか枝というか、そういう絵が乗っかってるんです。

その部分をどうしようかなーといろいろ考えたのですが、今回は絶対配置で処理しようと考えました。絶対配置を使えば同じ場所にフォトショップなどのレイヤーのように表示したい内容を重ねて表示する事ができます。

楽をしたかったら･･･の巻

上でちょっとややこしそうな事を書きましたが、そういうの考えるのが面倒な場合、一番手っ取り早いのはこうです。

ややこしい飾りを水色のボックスの背景へ回す。これが一番楽だと思います。こうした場合は特に何か悩む必要もありません。が、一応このサイトではどうしてるのか説明してみます。

で、どういう重なりになってるの？の巻

どういう重なりになっているのかという事ですが、まず一番下に水色の枠つきボックス、その上に問題の絵、一番上にテキストを置くことにしました。

どうせなら真ん中の絵を一番上から被せたらいいんじゃないの?と思われる方もいらっしゃるかもしれないですが、例えば左の図の真ん中の薄い水色のレイヤー(花や枝の絵の入ってるやつ)を一番上に配置した場合、そのレイヤーの下にあるレイヤーには触れる事ができなくなります。たとえそこに配置している背景画像が透過されていても、下のレイヤーには触れません。

「触れない」という日本語はちょっと間違ってるかもしれないですが、例えば図の一番上にのってるテキストの入っているレイヤー(薄い緑のレイヤー)を花や枝の絵の入ってるレイヤー(薄いブルーのレイヤー)の下に持ってきたとします。そうすると、そこにあるリンクテキストをクリックできなくなってしまうのです。

クリックできなくなるエリアは薄い水色のレイヤーのサイズ(幅・高さ)分です。上の例の場合、テキストの入っている薄い緑のレイヤーの方が絵の入っている薄い水色のレイヤーよりも高さがあるのがわかると思います。その場合、薄い水色レイヤーと重なってる部分はクリックできず、薄い水色レイヤーからはみ出してる下の方のテキストリンクだけクリックできるのですが、それだと薄い水色レイヤーと重なってる部分はリンクが機能しないことになり、意味がないので必ずレイヤーの重なりはテキストを最前面にしておきます。

ちょっとまた長くなってきたので次のエントリに続きます。

2007年04月16日 21:12 | Red | パーマリンク