CSSスプライト ＆ WP TO TOP
このブログを作ったらmphotographの方のnavigationボタンが6つになってしまって見た目的に好みではなかったので変更しました。
右側の【blog】と書いてある丸い画像です。
本当は猫の足あとにしようと思っていたのですが、気力が・・・
width:100px,height: 200pxの画像を用意しました。
即興なのでデザインセンスも丁寧さもありませんが。
私の場合、blogbutton.phpを作って
<div id="blogbutton">
<a href="http://machonne.com/" target="_blank">machonne.com[私のブログサイト]</a>
</div>
を書いております。
そしてindex.htmlなどに
<?php include_once(dirname(__FILE__) . "/blogbutton.php"); ?>
を書いて出力させています。
のちのち変更があった際に、外部ファイルにしておくとblogbutton.phpのコードとCSSを書き換えるだけで更新できます。
本体のHTMLコードの変更がないだけでかなり楽になりますね。
#blogbutton a {
top: 200px;
right: 140px;
position: fixed;
background: url(blogbutton.png) no-repeat;
width: 100px;
height: 100px;
display: block;
text-indent：－99999px;
}
#blogbutton a:hover {
background-position-x: left;
background-position-y: -100px;
}
としています。
これでマウスオーバーで画像が下のものに切り替わるということ。
そしてこの【machonne.com】にはWP TO TOPを入れてみました。
長い文章の時に右下にアンカーボタンが出てページトップにスクロールしてくれます。
少しカッコ悪いので画像を作って、カスタマイズしてみようかなと思います。
