ページトップへ戻るボタン。ブログに設置する方法(簡単編)

ページトップへ戻るボタンはあって損なし

いろいろなブログでよく見るページトップへ戻るためのボタン

BloggerのテンプレートであるVaster2には、標準でついていなかったため設置することにしました。やはり、あるのと無いのではユーザビリティが違うと思います。今回は簡単にトップへ戻るボタンを設置できる方法を紹介します。Bloggerブログ以外でも設置する方法を記載してあるので参考にしてください。

トップへ戻るボタン設置方法(簡単編)

簡単にページトップへ戻るボタン作成手順1

1.Bloggerメニューにて"レイアウト"をクリックします。

2."footer"でガジェットを追加をクリックします。

簡単にページトップへ戻るボタン作成手順2

3."HTML/JavaScript"をクリックします。

簡単にページトップへ戻るボタン作成手順3

4.コンテンツ内に以下のコードを入力し、保存をクリックします。

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">
<img src="ボタン画像のURL" height="画像の高さ" width="画像の幅" /></a>

コード内のボタン画像のURL画像の高さ画像の幅に関しては、別途設定することになります。

簡単にページトップへ戻るボタン作成手順4

5.ボタンの元となる画像データを用意して、ブログ記事作成画面にて画像を投稿する要領でブログ上にアップロードします。

EC design(デザイン)

ボタンの元データを探す場合、こういった無料でデザインを配布してるところからゲットするのがオススメです。ちなみに上記ホームページで"ボタン"と検索するといろいろ出てきます。

簡単にページトップへ戻るボタン作成手順5

6.アップロードした画像を"右クリック"→"新しい画像でタブを開く"をクリックします。

簡単にページトップへ戻るボタン作成手順6

7.新しいタブで画像を表示したら、URL欄をコピーします。

8.その後、項目2で追加した"HTML/JavaScript"ガジェットのコード内、ボタン画像のURLにコピーしたURLを貼り付けます。また、画像の高さ画像の幅をお好みで調節してください。

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">
<img src="ボタン画像のURL" height="40" width="40" /></a>

ちなみにボクは正方形のボタンを選んでいたので、高さと幅をそれぞれ"40"に設定してみました。画像の縦横比によって調節する必要が出てくると思います。

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">
<img src="ボタン画像のURL" height="auto" width="40" /></a>

長方形などの正方形ではないボタンを使いたい場合は、heightを"auto"に変更して、"width"でサイズを調節してください。

ボタンイメージ

簡単にページトップへ戻るボタン完成 PC表示

PCから見た場合

簡単にページトップへ戻るボタン完成 スマホ表示

スマートフォンから見た場合

ブログに常時、ページのトップへ戻るボタンが右下に表示されるようになります。ボタンを押すと一気にトップまで戻れます。

Blogger以外での設置方法

参考にした記事にも記載してある通り、HTML(テンプレート)の<head>~</head>間にコードを貼り付けることによって同じようにボタンを設置することができます。わからない方は</head>の直前にコードを貼り付けるようにしてください。
※HTMLを編集する場合は、必ずバックアップを取ってから編集するようにしましょう。

なお、FC2ブログにおいての編集に関しては、テンプレートのHTMLを編集することなく、プラグインによるボタン設置も可能でした。

参考

コピペで簡単!「ページの先頭へ戻るボタン」を設置する方法

スポンサーリンク
スポンサーリンク

ふぉろみー

ブログ更新ツイッター作りました。スロット以外はこっちで告知されます。(フィギュアetc)
よかったらフォローしてください!
 

いろいろつぶやくアカウントはこちら
 

ブログランキング参加中

よかったら押してください!
ブログランキング・にほんブログ村へ

1 件のコメント :

  1. はじめまして
    書かれてある通りにすることで、何もわかっていない私でも設置できました。本当にありがとうございました。

    返信削除