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

スポンサー

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

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

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

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

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

 

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

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（管理バー）を上から下へ移動したときの詳細はこちら↓

参考

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。