項目に好きなタイトルをつけてみよう!
※2004/12/21
「リスト」だと途中の項目のリンクがクリックできなくなることが判明したので修正しました。
------------------
◆まだまだ暫定Ver。
*3列でも2列でも、項目数が増えても対応できます。
*項目名は、画像でも文字でもどちらでも可。
やることいっぱいですが、難易度的にはそれほど高くありません。
小細工好きな方はぜひ。
「プレビュー」では調節できない部分があるので、あらかじめ試験用の別ブログで試すか、訪問客のいない時間帯を狙って作業してください。
コピペできない弊害が出ますので各々で調節してください~。
あと、細かく書いてたらわけわからなくなってきてしまって挫折したので、説明はざっくりとしかしていません。
不明な点はコメントなりBBSなりで質問どうぞ~。
■仕組み
ひっぱりあげて、重ねて、位置調節をして、変えたかのように見せかけています。
■用意するもの
・ピクセル定規 ・気合 ・根性 ← 重 要
Step:1 普通にスキンを作り、おおまかな配置をつかむ。
いつものようにスキンを作成します。
プリントスクリーンで画面を保存できると、あとが楽だったりします。
Step:2 項目を決める
<$menuleft$>の上に項目名の入った
(嗚呼…説明あばうとでごめんなさいごめんなさい)
※リストだとOperaやFireFoxで見るとリンクが無効になってしまうので、「見出し」を使ってください。
例)こんな感じで
<div class="cont">
<h3 class="cate">かてごり</h3>
<h3 class="exblog">えきさいとぶろぐ</h3>
<h3 class="comm">いただいたコメント</h3>
<h3 class="***">・・・(必要な分だけ増殖)</h3>
</div>
<div class="mn"><$menuleft$></div>←本来のめにぅ位置
※クラス名は全て違うものにしてください。
Step:3 大きな囲みを作る
Step:2で作った項目名と、めにぅを一緒に囲みます。
こんな感じ↓
<div id="ookinakakomi">
<div class="cont">
<h3 class="cate">かてごり</h3>
<h3 class="exblog">えきさいとぶろぐ</h3>
<h3 class="comm">いただいたコメント</h3>
<h3 class="***">・・・(必要な分だけ増殖)</h3>
</div>
<div class="mn"><$menuleft$></div>
</div>
Step:4 一番上を揃える
【CSS編集】欄に、加えたクラス分のスタイルを追加します。
例)
/*-- おおまかな配置 ----------------------------*/
div#ookinakakomi{position:relative※1}
div.cont{position:absolute※2}
div.mn{position:absolute※2;line-height:18px;※3;}
div.mn_t{display:none}
※1
大きな囲みのpositionは、「static」以外の値を入れてください。
絶対(absolute)でも相対(relative)でもかまいませぬ。
※2
項目名を囲むDivのpotisionは、「絶対配置(absolute)」にすると
位置調節が楽でございます。
※3
メニュー部分のline-heightは、%ではなくpxやptできっちり指定してください。
%で指定すると、ブラウザ毎にずれが生じます。
この時点で、「プレビュー」して表示を確認してみます。
なんかこう…書き加えた項目名と、メニューの内容の一番上が重なった感じになっていたら成功です。
なってなかったら、相対配置になっているところを絶対配置にしてみたり適宜修正してください。
Step:5 間隔を整えてできあがり。
あっさり書きましたが…ここが一番めんどくさいところ。
本来の項目名($mntitle$)は、display:none で消しているので、項目内容($mnbody$)部分に [padding] で上余白を加えます。
加える余白は、項目名が画像なら「画像の高さ+α」、文字なら、「<h3>の高さ+α」です。
余白を加えたら、項目名を配置していきます。
項目名はリストで作ったので、こんな感じで位置を確定してゆくとよいかと。
/*-- 項目調整 ----------------------------*/
h3.cate{position:absolute;top:0} ※一番上は0です。
h3.exblog{position:absolute;top:***px} ※一番上のメニューの高さ分下げます。
h3.comm{position:absolute;top:***px} ※1つ上のメニューの高さ分(以下同じ)
図解するとこんな感じ↓
このとき、ピクセル定規(ピクセル単位で計れる定規ソフト)があると便利です。
ないときは、目分量で何度か調節しないといけないので、ここで最初に用意した「根性」をフル活用します。
あとは、保存して確認して調節して保存して確認して調節して…の繰り返しでございます。
がんばってぇ(><)
そして、どなたかもっといい方法を考えてくだs(げほげほ)
by saradhina
| 2004-12-07 19:17
| Road to MySkin