位置固定型のプロフィールアイコンを設置しました

Hinemosu

当ブログHinemosuの各ページに、位置固定型のプロフィールアイコンを設置しました。

ブログの右上を見ると、なんか見えるはずですよ。

現在の表示内容はこんな感じ。
2013-03-06_1357

左からそれぞれ、flickrのフォトストリーム、Facebookページ、ツイッターページ、RSS Feedにリンクしています。

使ってるコード的にはこんな感じ。

footer.phpに以下のコードを追加。

<a href="https://www.hide10.com/feed" target="_blank" rel="nofollow" class="buttonfixed feed_icon" title="RSS feed">Feed</a> 
<a href="https://twitter.com/hideto" target="_blank" rel="nofollow" class="buttonfixed twitter_icon" title="follow me">Tweeter</a>
<a href="http://www.facebook.com/Hinemosu" target="_blank" rel="nofollow" class="buttonfixed facebook_icon" title="Facebook page">Facebook</a>
<a href="http://www.flickr.com/photos/hide10/" target="_blank" rel="nofollow" class="buttonfixed flickr_icon" title="Flickr Profile">Flickr</a>

CSS定義ファイルに以下のコードを追加。

.buttonfixed {display:block; position:fixed; z-index:9999; text-indent:-9999px; overflow:hidden; outline:none; top:5px;}
.feed_icon {background: url('https://www.hide10.com/images/rss_24.png') no-repeat center center;width:24px;height:24px;right:5px;}
.twitter_icon {background: url('https://www.hide10.com/images/twitter_24.png') no-repeat center center;width:24px;height:24px;right:32px;}
.facebook_icon {background: url('https://www.hide10.com/images/facebook_24.png') no-repeat center center;width:24px;height:24px;right:59px;}
.flickr_icon {background: url('https://www.hide10.com/images/flickr_24.png') no-repeat 0 0;width:24px;height:24px;right:86px;}

アイコンの大きさやリンク先がシックリ来てないんだけど、取りあえずで公開しちゃってます。

そんな感じで！