ページトップへ戻るボタンをCSSでデザインする

公開日: 2014年02月27日
最終更新日: 2014年06月09日

ページトップへ戻る

いよいよ、現在右下に固定表示されている「ページトップへ戻るボタン」のデザインをCSSでカスタマイズします。ちなみに今回は、上にも下にも行けるように2つのボタンを作成したいと思います。なぜ下にも行く必要があるかって?それは記事内で(ω)

もくじ

はじめに

今回は、「ページトップへ戻る」ボタンをカスタマイズしたいと思います。
↓これですね。
ページトップへ戻るボタン(賢威のデフォルト)

賢威を使う上で、他の人と差別化するには非常に重要な部分です。
これが見えた瞬間に、1発で「あ、賢威つかってる」って分かりますからね。

今まで賢威のカスタマイズ日誌の一連の記事で、オリジナル感を出すためにページトップへ戻るボタンをカスタマイズすることは「重要だよ!重要だよ!」と言い続けてきましたが、先延ばしにしていました^^;

ですが、ようやくまとまった時間が取れましたので、本日はついにここをCSSでカスタマイズします。

ページトップへ戻るだけじゃないボタン

今回、ページトップへ戻るボタンは、上にも下にも行けるようにしたいと思います。

主な理由は、あまりしている人がいないからです。

inosh blogのように、訪問者のユーザー層が定まっておらず、テーマもブレブレで、大した情報も発信できていないブログの場合、しばらくの間はアクセス数が伸びない&リピーターが付かないでことが予測されます。

そんな中、何となく印象に残ってもらいたい…
なら何か珍しいことをしてみよう!ページトップへ戻るだけじゃないボタンだ!
っていうノリで。

他にもちゃんとした理由もあり、コンテンツがとんでもない量になるページがあった場合、そのボタンがあることで自分自身が助かることがあるっていうのもあります。

またいつになるか分かりませんが、そのうち訪問者が増えてコメントをいただけるようになった時に、コメントを残した人というのは返信が届いているかどうかなどを確認するため、定期的に再訪問する確率が高いです。

掲示板のスレッドなどと一緒ですね。
自分が書き込んだ後、その反応を見るために再度訪問することが多いですよね?ね?

そういった時、ワンクリックでコメント欄まで行けると便利!だと思うのです。

以上のような理由から、inosh blogではページトップへ戻るだけじゃないボタンを設置します。

footer.phpの記述を変更する

ページトップへ戻るボタンのカスタマイズをするにあたり、まずはfooter.phpの記述を以下のように変更しました。

footer.php(デフォルト)

<!--▼ページの先頭へ戻る-->
<p class="page-top"><a href="#container">このページの先頭へ</a></p>
<!--▲ページの先頭へ戻る-->

下矢印

footer.php(カスタマイズ後)

<!--▼ページの先頭へ戻る-->
<a href="#container" id="page_top"><span><img src="<?php bloginfo('template_url'); ?>/images_my/clear.png" alt="ページトップへ戻る" /></span></a>
<?php if (is_single()) :?>
<a href="#respond" id="page_down"><span><img src="<?php bloginfo('template_url'); ?>/images_my/clear.png" alt="ページエンドへ進む" /></span></a>
<?php else :?>
<a href="#footer" id="page_down"><span><img src="<?php bloginfo('template_url'); ?>/images_my/clear.png" alt="ページエンドへ進む" /></span></a>
<?php endif; ?>
<!--▲ページの先頭へ戻る-->

ページトップへ戻るボタン(上方向にスクロール)に関しては一律ですが、ページエンドへ進むボタン(下方向にスクロール)に関しては、投稿ページかどうかをif文で判断して、投稿ページとそれ以外とでリンク先を別の場所に指定しています。

投稿ページの場合はコメント欄、それ以外(トップページやカテゴリーページなど)はフッター、にリンクしています。

ちなみにimgタグ内の画像は、横12px縦8pxの透明の四角形画像です。

aタグ > spanタグ > imgタグ という形になっています。
spanタグは、後でスタイルシートでデザインする際に必要となります。

スタイルシート(CSS)でデザインする

CSSファイルには、以下のように記述しました。

mystyle.css

/* aタグ */
#page_top, #page_down {
    position:fixed;
    right:15px;
    background:#f2f2f2;
    padding:14px 10px;
    border:1px solid #222;
    z-index:3;
}

#page_top {
    bottom:70px;
}

#page_down {
    bottom:15px;
}

#page_top:hover, #page_down:hover {
    border:1px solid #e41858;
}

/* spanタグ */
#page_top span, #page_down span {
    display:block;
    height:16px;
    width:24px;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
}

#page_top span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_top.png) no-repeat top;
}

#page_down span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_down.png) no-repeat bottom;
}

#page_top:hover span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_top.png) no-repeat bottom;
}

#page_down:hover span{
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_down.png) no-repeat top;
}

/* モバイル用スタイル */
@media (max-width:640px) {
#page_top, #page_down {
    right:5px;
    padding:8px 6px;
}

#page_top {
    bottom:35px;
}

#page_down {
    bottom:5px;
}

#page_top span, #page_down span {
    height:8px;
    width:12px;
}

#page_top span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_top.png) no-repeat top;
    background-size:11px 22px;
}

#page_top:hover span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_top.png) no-repeat bottom;
    background-size:11px 22px;
}

#page_down span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_down.png) no-repeat bottom;
    background-size:11px 22px;
}

#page_down:hover span {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/p_down.png) no-repeat top;
    background-size:11px 22px;
}
}

これにより、ページトップへ戻るだけじゃないボタンが出来上がりました↓
ページトップへ戻るボタン(カスタマイズ後)

マウスオーバーするとピンク色の矢印がニョキッと現れます。
マウスオーバー

これまで色々とinosh blogをカスタマイズしてきましたが、これでもうソースを見ない限りは賢威を使っているとバレないのではないでしょうか。(いや、バレても全然いいんですけどね)

ただ、IE8以前のことは一切考えずにカスタマイズしていますし、タブレットのことも考えていませんので、環境次第では大いに崩れていることと思います。

そこは、妥協します。。。

本当はこういう遊び心+動きのあるやつにしたかった…

本当は、Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個 / SQUEEZE – Web Design Studio -などで紹介されているように、遊び心があって、面白い動きのあるものにしてみたかったのですが、諦めました…。

技術的な問題もありますし、時間的問題もありますが、良い案が思いつかなかったのが大きな理由です^^;

それに、遊び心はありませんが、今回デザインしたページトップへ戻るボタンは、今のところは気に入ってます。

私のようにまだまだデザイン力がない発展途上の人間の場合、「今回はそこそこ良いWebサイトが出来たぜ!」とか思っても、数ヶ月後に見たらそのデザインはクソなことが多いです。

なので、inosh blogを運営していくにあたり、またいつか全面リニューアル(リデザイン?)することになると思います。

その日までは、今の形でよしとしたいと思います。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む