「前のページ」「次のページ」に小細工するょ♪
久々に「ぷち★テク」でも…。
今回は、『「前のページ」「次のページ」の表示を変えてみよう♪』です。
【用意するもの】
・画像(素材屋さんとかでNext・Backのアイコンを探すか、自作してくださいましv)
・気合と根性と遊び心
【手順】
Step1
<$prepage type=1$> と <$nextpage type=1$> を探して、任意の名前をつける。
(例:<span class="prev"><$prepage type=1$></span> …など)
Step2
CSS編集の欄に、以下を書き加える
※1 : Step1でつけた名前を指定
※2 : 画像の幅+「前のページ」という“文字”の幅
※3 : 背景色
※4 : リンクがはられないときの画像URL
※5 : 文字色!背景色と同じにする
※6 : リンクがはられているときの画像URL
POINT
→ text-align で、画像と反対の側に文字をよせてください。
Step3
表示を確認し、適宜位置を調節して完了。
(関連:前のページ、次のページ)
えと、めっちゃ単純に「文字を背景色と同化させて見えなくし、背景画像を変えて誤魔化す」という感じです。(うちのブログを反転すると意味が分かるかと…w)
なので、※3 と ※5の色が違うと文字が見えてしまいますし、下地の背景が複雑な模様の画像とかの場合はちょっと使えません。
また、a(リンク文字)の display の指定を「block」にしないと、文字が画像と逆サイドにいっているので、画像をクリックしても動かないという事態になります。
※画像自体にリンクがはられているわけではないため。
けど、だいたいはこれでいけるかと。
お試しあれ~。
あまり詳しい説明をつけていませんので、不明な点とかありましたればお気軽にコメントくださいまし~。
今回は、『「前のページ」「次のページ」の表示を変えてみよう♪』です。
【用意するもの】
・画像(素材屋さんとかでNext・Backのアイコンを探すか、自作してくださいましv)
・気合と根性と遊び心
【手順】
Step1
<$prepage type=1$> と <$nextpage type=1$> を探して、任意の名前をつける。
(例:<span class="prev"><$prepage type=1$></span> …など)
Step2
CSS編集の欄に、以下を書き加える
- span.prev※1
- {display:block;width:***px※2;background:#****※3 url('http://***※4') no-repeat right center;color:#****※5;}
- span.prev a※1
- {display:block;width:***px※2;background:background:#****※3 url('http://***※6 no-repeat right center;color:#****※5}
- span.prev a:link,span.prev a:visited,span.prev a:active,span.prev a:hover
- {color:#****※5}
※1 : Step1でつけた名前を指定
※2 : 画像の幅+「前のページ」という“文字”の幅
※3 : 背景色
※4 : リンクがはられないときの画像URL
※5 : 文字色!背景色と同じにする
※6 : リンクがはられているときの画像URL
POINT
→ text-align で、画像と反対の側に文字をよせてください。
Step3
表示を確認し、適宜位置を調節して完了。
(関連:前のページ、次のページ)
えと、めっちゃ単純に「文字を背景色と同化させて見えなくし、背景画像を変えて誤魔化す」という感じです。(うちのブログを反転すると意味が分かるかと…w)
なので、※3 と ※5の色が違うと文字が見えてしまいますし、下地の背景が複雑な模様の画像とかの場合はちょっと使えません。
また、a(リンク文字)の display の指定を「block」にしないと、文字が画像と逆サイドにいっているので、画像をクリックしても動かないという事態になります。
※画像自体にリンクがはられているわけではないため。
けど、だいたいはこれでいけるかと。
お試しあれ~。
あまり詳しい説明をつけていませんので、不明な点とかありましたればお気軽にコメントくださいまし~。
by saradhina
| 2004-10-23 13:22
| Road to MySkin