アイコンフォントでページ上部へ戻るリンクを作成。

前回、アイコンフォントでソーシャルバーを作成したのをきっかけに、

他に減らせる画像はないかと探し、

「ページ上へ戻るリンク」と「トップページに戻る」に使っていた画像をアイコンフォントにすることに。

というのも、ソーシャルバーがあまりにもクールに仕上がったもので、今までの画像がなんだか野暮な気がして。

バーに合わせてシックな感じにしてみました。

固定でページ右端に表示

 

前回のソーシャルバーの実装はこちら♪

CSS

.return{
  background:url(img/wrap_bg.png);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;         /* CSS3 */
    -moz-border-radius: 3px;    /* Firefox */
    -webkit-border-radius: 3px; /* Safari,Chrome */
  padding:10px;
    position:fixed;
    top:50%;
    right:8px;
    z-index:9000;
}
.return ul li a {
    text-decoration: none;
    color: #a8a2a2;
    padding: 0 5px;
}
.return ul li a.lsf:hover{
  text-decoration: none !important;
  color:#47B5EF;
}
.return ul li a.home:hover{
  color:#fdcd1a;
}

ちょっと、角丸にしてみましたよ。

おまけ

小さい画面のタブレットでは、邪魔だし、不要なので非表示にしています。

@media screen and (max-width: 620px) {
.return {
	display:none;
}
}

 

HTML

<div class="return">
<ul>
<li><a href="#wrap" title="このページの上へ" class="lsf up">up</a></li>
<li><a href="<?php bloginfo('url'); ?>" title="トップページへ" class="lsf home">home</a></li>
<li><a href="#copy" title="このページの下へ" class="lsf down">down</a></li>
</ul>
</div>

「このページの下へ」はコピーライトへリンクさせた苦肉の策( ̄w ̄) ぷっ

まとめ

アイコンフォントでページの重さを解消!ソーシャルバー作成 同様、「class=lsf」がアイコンフォントを使うというおまじないです。

今後も、このリガチャ(合字)を使う時は、「class=lsf」を付与すればOKです。

次回、パンくずに使ってみようかなーっと。
前回ソーシャルバーを設置してみた記事はこちら♪


adminbar(管理バー)を上から下へ移動したときの詳細はこちら↓

参考

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA