<< マックホルツ彗星が見れるそうです。 明けまして、おめでとうございます。 >>
 

”次のページへ”のおしゃれ方法について


記事の前と次のページへのリンクにのおしゃれ方法です。ブログの記事の下の方に<前のページへ  と  次のページへ>のリンクを見つけることができると思います。この部分をおしゃれしてみたいと思います。

まず,完成図を頭の中でイメージしましょう。
完成図は図1に示すように,<前のページへ  と  次のページへ>がボタンの素材に置き換わって,マウスを上に載せると説明が表示されます。

a0031863_22582878.jpg

図1 設置の一例


では、実際にやってみましょう!


HTML編集


1.HTML編集で$prepageと$nextpage の部分を探して下さい。
2.この部分に対応するTDのタグに以下のようにclass指定(青字の部分)を追加します。
3.次にtitle指定でマウスを乗せたときのメッセージを書き込みます。
4.各TDのWIDTH=○○%(赤字の部分)を修正します。トータル100%になるように指定して下さい。中央のHOME部分の指定が少ないので量を増やしました。




HTML編集

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN=RIGHT WIDTH=45% class=MV_L title="前のページへ"><$prepage type=1$></TD>

<TD WIDTH=10% ALIGN=center class=MV_TOP title="ホームへ"><a href="自分のブログのURL">Top</a></TD>

<TD ALIGN=LEFT WIDTH=45% class=MV_R title="次のページへ"><$nextpage type=1$></TD>

</TR></TABLE>





CSS編集



1.以下のコードを追加します。
2.画像に合わせてheight,width,paddingで調整をします。
この際にpaddingの指定をしっかり行わないとMozilla Firefoxなどのブラウザでは表示が上手く出来ないことがあります。

3.colorで文字の色をボタンの背景と同色にしています。
ボタンの素材にあわせて色を各自で変更して下さい。

注意:MV_R,.MV_L,.MV_TOPの部分はボタン画像ではなく、ボタンが表示されない場合の対策なので、背景と同じ色を指定して下さい。




CSS編集


/*ボタンが表示されないときの対策用*/
.MV_R,.MV_L,.MV_TOP{
color:#ffffff; /*背景と同じ色*/
height:20px;
padding:20px;
}



/*次のページへ*/
.MV_R a,.MV_R A:link,.MV_R A:visited, .MV_R A:active,.MV_R A:hover{
font-size: 0%;
color:#ffffff;/*ボタンの素材と同色*/
background: url(次のページへの画像URL) no-repeat center;
height:50px;
width:100px; /*余裕も持たすために大目の値を入れています*/
padding:20px;
}

/*前のページへ*/
.MV_L a, .MV_L A:link, .MV_L A:visited, .MV_L A:active, .MV_L A:hover{
font-size: 0%;
color:#ffffff;/*ボタンの素材と同色*/
background: url(前のページへの画像のURL) no-repeat center;
height:50px;
width:100px;
padding:20px;
}

/*HOME*/
.MV_TOP a,.MV_TOP A:link ,.MV_TOP A:visited ,.MV_TOP A:active,.MV_TOP A:hover{
font-size: 0%;
color:ffffff;/*ボタンの素材と同色*/
background: url(HOMEへの画像のURL) no-repeat center;
height:50px;
width:50px;
padding:20px;

}




今日のポイント
  •  font-size: 0%で文字を小さくしています。

  • a のアンカータグの背景にイメージを表示させるためにpaddingで余白を入れてボタンを表示するようにしています。






注意:リンクをボタンのように押し下げるTipを使用している場合は解除して下さい。調整が難しいので^^;


【解除前】
A:HOVER {

COLOR: #813888;
TEXT-DECORATION: UNDERLINE;

/*---- 以下の部分を削除 -----*/
 position: relative;
top: 1px;
left: 1px;
/*---- ここまでを削除 -----*/


}

【解除後】
A:HOVER {

COLOR: #813888;
TEXT-DECORATION: UNDERLINE;

}



難易度:★★★
イメージにあわせてpaddingなどで調整が必要のため、難しく感じられるかも知れません。
みなさん、がんばって挑戦して下さいね。

ぽっと



KLMtoday さんのサイトでも別の手法による説明がされています。
よろしかったらご覧下さい。
ページ送り(前のページ/次のページ)をiconに変える
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-01-01 03:00 | │├メニュー
<< マックホルツ彗星が見れるそうです。 明けまして、おめでとうございます。 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。