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

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


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

まず,完成図を頭の中でイメージしましょう。
完成図は図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 | │├メニュー | Trackback(5) | Comments(18)
トラックバックURL : http://potto.exblog.jp/tb/1468561
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from 流れ星の散歩道(^_-)-☆ at 2005-01-08 23:11
タイトル : 慌しさ加速中(>_<)
おはようございますm(__)m ここのところ、全然更新していなくて・・・本当にすみません・・・。 新年早々、プレ社会人生活が始まって慌しさ加速中なのです(笑)。 「いつも、動いているイメージがあって忙しそうだよね」と周りの人たちによく言われながらも、否定してきた私なのですが・・・。今回ばかりは肯定せずにはいられない、といった感じです。 まだバイトに出たのは2日間だけなのですが、今まで殆ど学業に時間を費やしていたということに加えて、お正月休みですっかり休みボケがついてしまったために、...... more
Tracked from 流れ星の散歩道(^_-)-☆ at 2005-01-08 23:20
タイトル : 慌しさ加速中(>_<)
おはようございますm(__)m ここのところ、全然更新していなくて・・・本当にすみません・・・。 新年早々、プレ社会人生活が始まって慌しさ加速中なのです(笑)。 「いつも、動いているイメージがあって忙しそうだよね」と周りの人たちによく言われながらも、否定してきた私なのですが・・・。今回ばかりは肯定せずにはいられない、といった感じです。 まだバイトに出たのは2日間だけなのですが、今まで殆ど学業に時間を費やしていたということに加えて、お正月休みですっかり休みボケがついてしまったために、...... more
Tracked from アヤフヤblog at 2005-02-20 00:38
タイトル : 新スキン、今回の変更点
さて、今回の変更点をさらっとまとめてみましょう。 なお、ぽっとさんのブログからトラックバックしていますので、 リンク記事と合わせて書いていきます。 ■上部のバーのリンク(Exciteブログ利用のものを主にまとめた) ■”次のページへ”のおしゃれ方法について (by ぽっとの陽だまり研究室さんより トラックバックその1) ・ここは以前から編集したいと思っていた場所。 タイミング的にぽっとさんが記事をアップしていてくれて、実行しました。 ただ、上部だけおしゃれになっています。 ...... more
Tracked from えせKiwi-Townの住人 at 2005-03-09 13:25
タイトル : 初めてHTMLをいじったのだけど・・
ついにHTMLに手をつけたぁ♪ あちらこちらを いじりました。 やっと、やっと、念願の「Toppageへ」をつける事ができました。 スキン編集をされているBlogさんをいろいろと研究させていただき、 試行錯誤を重ねて やっと。。 う、嬉しぃ~~!(>▽<) ついでにリンクにマウスを重ねると文字が出るように。。 今回「ぽっとの陽だまり研究室」さんを参考にいたしました。... more
Tracked from ヒノとぶらり at 2007-01-04 00:23
タイトル : ページ移動を画像で。
記事の下の「次のページへ」「前のページへ」のリンクを 画像にしてみました。 ついでに、記事の下に、ページトップに移動できるリンクをつけました。 ▲をクリックすれば、スクロールしなくても、上にいけます。 ↓こちら、参考にしました。↓ ”次のページへ”のおしゃれ方法について... more
Commented at 2005-01-05 06:16
ブログの持ち主だけに見える非公開コメントです。
Commented at 2005-01-05 15:50
ブログの持ち主だけに見える非公開コメントです。
Commented at 2005-01-05 19:49
ブログの持ち主だけに見える非公開コメントです。
Commented at 2005-01-06 21:07
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-01-06 21:45
鍵さん、こんばんは^^
コメントありがとうございます。
これからも、よろしくお願いします。
Commented at 2005-01-06 23:27
ブログの持ち主だけに見える非公開コメントです。
Commented at 2005-01-08 10:42
ブログの持ち主だけに見える非公開コメントです。
Commented at 2005-01-08 10:43
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-01-08 20:12
鍵さん、こんばんは^^
返事はそちらにしましたので読んでくださいね。
Commented at 2005-01-08 21:17
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-01-09 15:07
鍵さん、設置成功おめでとう!
成功すると嬉しいですね。
Commented by tallylamp at 2005-01-20 14:49
こんにちは!
私もこの「次のページ」「前のページ」ってやつの小細工したんですが、まぁ、なかなか思うようになりませんで。
もじらがね・・・。

こうして、いろいろ考えられる頭が欲しいです。

私がやったやり方、めちゃめちゃ無理矢理ですから~!

しかし、ここのlogは、内容充実だ・・・。
Commented by okiraku_kazu at 2005-03-09 13:29
こんにちは。 初めまして、kazuと申します。

恥ずかしながら、トラックバックさせていただきました。
差し支えがあるなら 削除してくださいね。

★彡いつも勉強させてもらっています。
どうもありがとうございます!
これからも よろしくお願いいたします。

kazu
Commented by potto37 at 2005-03-12 14:13
kazuさん、こんにちは
ちょっと忙しくてやっと入れました^^;

こちらこそ、よろしくお願いします。
Commented at 2006-06-20 19:47
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2006-06-20 20:32
鍵さん、こんにちは

>ページのトップにしたいのですが

ページの途中にリンクするには以下のアドレスを参考にして下さい。
ページトップ部分にnameで名前を指定し、リンク先をnameで指定した先をしていします。
http://www.tohoho-web.com/how2/link.htm#nameLink

Commented at 2006-06-21 20:16
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2006-06-26 20:23
鍵さん、解決できたようでよかったです。
<< マックホルツ彗星が見れるそうです。 明けまして、おめでとうございます。 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。