LION BLOG(ライオンブログ)にページトップへ戻るボタンを追加する

LION BLOG(ライオンブログ)にページトップへ戻るボタンを追加する

 当ブログは、無料の高機能なワードプレステーマのLION BLOG(ライオンブログ)を使用しています。

とても気に入って使用させていただいていますが、他に欲しい機能 がいくつかありました。

それが、他のサイトでも良く見かける「ページトップへ戻るボタン」です。

LION BLOG(ライオンブログ)にも最下部には用意されている

 ページの最下部までスクロールすると、画像のようなボタンがあり、クリックするとページ内のトップまでジャンプすることができるボタンが用意されています。

LION BLOG(ライオンブログ)の特徴の中に、JavaScript不使用ということがありますので、このボタンをクリックしても他のサイトで良く見かけるようなアニメーションはありません。

アニメーションには、同一ページ内にいるということを認識させる効果があります。

アニメーション無しだと、別のページへ遷移したように見えてしまうとうデメリットもありますが、余計な動作がないぶん軽量です。

ブログへのアクセスはスマホからが主流

 今では、ほとんどのサイトやブログではスマホからのアクセスが半数以上を占めている状況です。

アフィリエイトブログなどでは、質の高い情報を提供する必要があります。

そうすると、1記事の文字数も1000文字を超えることが多くなります。
スマホから記事を読んでいると、スクロールする幅も相当なものになってしまいます。

そのようなとき、ページの最下部にまでいかないとページのトップに戻れないということでは、少し使い勝手が良くないと感じていました。

CSSのみでページトップへ戻るボタンを作る

 LION BLOG(ライオンブログ)をカスタマイズして今回作成するのは、画面右下にページトップへ戻るボタンを固定表示するタイプのものになります。

 LION BLOG(ライオンブログ)のテーマに手を加えるものではないので、他のテーマを使用している場合でも同様の方法で作成することができます。

HTML

ヘッダー部など、すべてのページで読み込まれる場所に記述する必要があります

当ブログの場合、「Header部」へ挿入すると、プラグイン「SyntaxHighlighter Evolved」で出力された部分のデザインが壊れてしまうことがわかり、「footer部」へ挿入することで正常に動作することができました。(原因はわかりません…)

HTML

<div id="top_btn">
<a id="jump_top" href="#">
  <i class="fa fa-angle-double-up" aria-hidden="true"></i>
</a>
</div>

Awesomeの部分はお好きなアイコンに変更してください。

CSS

CSS

#top_btn{
	position: fixed;
	bottom:20px;
	right:10px;
	width:45px;
	z-index:1;
}
#jump_top {
    display: block;
	text-decoration: none;
    width: 45px;/*幅*/
    height: 45px;/*高さ*/
    background: #B92C2C;/*丸の色*/
    text-align: center;/*中央寄せ*/
	vertical-align: middle;/*←不要かもしれません*/
    border-radius: 50%;/*角丸く*/
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    transition: .3s;/*ゆるやかに変化*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);/*シャドウ*/
}
#jump_top:hover {
	filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}
#jump_top i{
	color: white;
	line-height: 45px;/*円の高さと同じ*/
	font-size: 28px;
}

 コンテンツを読む邪魔にならないように、透過させておいて、マウスオーバーしたときに濃く表示されるようにしています。

また、影をつけることでコンテンツよりも上にあるボタンのように見えるようにしてみました。

ライオンブログにページトップへボタンまとめ

 ライオンブログの最下部に同様のボタンが用意されているので、今回のようなボタンが必要かどうかは好みの問題もあるかと思います。

Affinger4などの有料テーマの中には、この機能のON/OFFができるようになっているものもあります。

今回、自分の勉強のためにこのようなカスタマイズをしてみました。

いろんなサイトを参考にさせていただいたり、独学のCSSなので意味のないコードや邪魔な部分もあるかと思いますが、参考程度には使えると思いますので、よろしければ使用してみてください。