記事ページの一番下に"Newer Post","Home","Older Post"三つのリンクが付いています(最初の記事と最後の記事それぞれ"Newer Post"と"Older Post"リンクが現れない)。この三つのリンクは英語であまり面白くないし、しかも"Newer Post"リンクは左、"Older Post"リンクは右で、ちょっど一般的な習慣とは逆ですね(自分のクセ?)
今回は"Newer Post"と"Older Post"の位置を左右逆して、表示方法を改造してみました。僕はただこの三つのリンクを”前の記事”、”ホーム”、”次の記事”のように日本語にしただけでしたが、皆さんは華やかなリンクボタンを入れてチャレンジしてみてください。
ここでこの三つのリンクの改造方法を瓦を投げます。
0、テンプレートをバックアップしてください。
1、"Newer Post"と"Older Post"の位置を左右逆する
テンプレートコードの以下のコードを見つけ出します
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
上のコードのleftとrightを入れ替えて、下のコードになるように。
#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}
2、リンクの表示を改造する
テンプレートから下のコードを見つけ出す。
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'
id='blog-pager-newer-link'><data:newerPageTitle/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'
id='blog-pager-older-link'><data:olderPageTitle/></a>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</b:if>
</div>
<div class='clear'/>
</b:includable>
皆さんもうわかったでしょう、改造する部分は上のコードの赤い部分です。それぞれを<img src="ボタンURL" />で書き換えればいいですね。
2006/10/06
"Newer Post","Older Post"リンクを改造
登録:
コメントの投稿 (Atom)
0 コメント:
コメントを投稿