livedoorブログで追従する「TOPに戻るボタン」を追加する方法

メインブログはlivedoorブログで運営中

私のメインブログの「マネテク！」はlivedoorブログで2005年から(！)運営しています。
その他の関連ブログはレンタルサーバー上のワードプレスで構築をしていて、テンプレートは「賢威」というテンプレートを使っています。

(参考リンク)
・賢威

話が脱線しますが、この「賢威」は私がこれまでに購入したツール類の中でも最もコストパフォーマンスのよかったものだと思います。
継続的なバージョンアップとサポートがあるのに、かかる費用は最初に支払った購入代金だけで、もうかれこれ10年近くバージョンアップさせてもらっている気がします。

さらに、単なるテンプレートではなくSEOのマニュアルが付属してきて、これがまた秀逸な内容なのです。
ちなみに「賢威」を作っているWEBライダーの松尾社長が書いたこちらの本は今でも私のバイブルです。
長兄のポールにも勝手に送りつけました(笑)。

トップに戻るボタンは今では当たり前の機能

さて話を戻して、「賢威」を使う場合、というか最近では大抵のテンプレートで標準装備をされているようにも思いますが、何も意識しなくてもトップに戻るボタンが実装されています。
一応「マネテク！」でも各ページの右下の方に「トップに戻る」というリンクだけは作ってあったのですが、やはりページを開いた当初は表示されていなくて、少し下にスクロールするとトップへ戻るというボタンが表示される、とあうような形がスマートかと思います。

実装の方法

というわけで早速ですが実装の仕方を解説します。
いろいろとやり方はあるのですが、おそらく一番簡単で、コピペするだけで動いてくれると思われます。

トップに戻るボタンを選んでアップロード

まず、livedoorブログのメニューで「画像/ファイル」から「ファイル管理」と進んで、トップに戻るボタンをlivedoorブログのサーバーにアップロードします。

以前はFTPが使えたのですが、めちゃくちゃ不便になりましたね…。
トップに戻るボタンはたくさんの方が提供してくださっていますので、お好きなものを選んで下さい。

(参考リンク)
・トップに戻る ボタン – Google 検索

CSSを編集

次に、CSSでトップに戻るボタンを指定します。
「ブログ設定」の「デザイン/ブログパーツ設定」の「PC」の「カスタマイズ」で「CSS」を選択して編集します。
既にずらずらと書かれているかと思いますが、一番下に突っ込んでおけばよいかと思います。

/*————————————————————
ページトップボタン
————————————————————-*/

.page2top {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 99;
}

テンプレートを編集

後はテンプレートの</head>の直前に以下を挿入します。
同じ画面の、「トップページ」「個別記事ページ」などを選択して挿入していきます。

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(function() {
var topBtn = $(‘.page2top’);
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

続いて、</body>の直前に以下を挿入します。
ページトップボタンの画像URLは先ほどアップロードした画像のURLに置き換えてください。

<div class=”page2top”>
<img src=”ページトップボタンの画像URL” alt=”ページトップボタン”>
</div>

これでうまく動くと思います。

今日のマネテクポイント

スポンサーリンク

前の記事： 2018年3月のマネテク！ANNEX
次の記事： 2017-2018POG：指名馬シーリアが4戦目で初勝利！モダンジャイブ初戦は2着！