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

マネテク! > ブロガー >
2018年04月02日

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

こんばんは、livedoorブログ大好き、ブロガー滝川@マネテク!です。

今更ながら私のメインブログである「マネテク」で「TOPに戻るボタン」を追加してみました。
それほど難しくはないのですが、多少てこずりましたのでやり方を紹介したいと思います。

writing-3209899_1920

スポンサーリンク

メインブログは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>

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

今日のマネテクポイント

livedoorブログで「マネテク!」を始めてからもう少しで13年になります。
われながらよく続いているなぁと思いますが、どこかで見切らなくてはいけないのかもと思ったりもしています…。
※この記事は、以下関連ブログ記事からの転載記事です。
・livedoorブログで追従する「TOPに戻るボタン」を追加する方法 | 人気ブロガーになる方法

スポンサーリンク

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

「ポイント・マイル」ブログランキング参加中 人気ブログランキングへ
by ジョージ滝川 at 06:43 │ Comments(0) ブロガー  
この記事にコメントする
名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 

このページのトップへ
ページトップボタン