ブログのトップへと戻るボタンを画面の右下に表示してみた。


2012-0909-171408.jpg

FC2のTipstourの時代に、トップに戻るボタンを配置してみました。

トップに戻るボタン自体は元々記事の一番下に配置されているのですが、
目立たないことと、記事の中間からトップに戻るのが(個人的に)わずらわしかったので
設置することとしました。
さて、ただ単に戻るボタンを設置しました、というだけでなく
今回そのトップへ戻るボタンの設置の方法について、簡単にまとめました。

スポンサードリンク

関連記事


このトップに戻るボタンを設置するには、HTMLのタグとスタイルシートを編集する必要があります。
大まかには下記の4つです。

画像ファイルをアップロード
自分のブログ内、もしくはサイト内に画像ファイルをアップロードします。

アップロード方法はそれぞれのブログで違いますが、
fc2の場合は適当な記事を作成して、その記事に画像をアップロード(アルバムに追加)します。

後はその画像のURLを後で記述しますので、どこかに控えておきます
HTMLにトップ部分を指定する記述を追加
次に、ボタンをクリックした際に移動する先をHTML内に下記の項目を追加します。

<div id=”all”></div>

上記の記述がされている部分に、ボタン画像をクリックすると移動するような形になります。
記載場所に指定はないですが、今回はトップに戻るためのボタンなので
ブログの一番上に記載しました。
<body>タグの真下あたりでよろしいかと思います。

CSSの記述内に下記の項目を追加します。
次はCSS側の記述の変更です。
記載場所はどこでも良いので、下記の項目を追加します。

.page-back {
position: fixed;
bottom: 25px;
right: 25px;

上記の記述は、今回は位置する対象の画像ファイルをどこに配置するか、という指定ですね。
■HTMLに画像を配置
続いて実際の画像ファイルを配置します。

こちらも記載場所はどこでもよいですが、これも<body>の前あたりでどうでしょうか。
<div class=”page-back”><a href=”#all”>
<img src=”[画像URL” /></a></div>

[画像URL]の部分には、先ほどアップロードした画像を指定してください。
上記の指定で、指定した#allのタグが
記述してある部分までリンクを付けた画像ファイルをページ内に配置することとなります。

正しく入力出来れば、画面右下に画像ファイルが設置され、
クリックすればブログのトップまで移動できるようになるはずです。

細かい記載の方法は他にもあるようですが、
とりあえずトップへの移動ボタンを設置したいということであれば
この方法で簡単には設置可能です。

もし、記載ミスやもっといい方法等あれば、是非教えてください。
HTMLやCSSについては、多少はわかっているとはいえ、一番良い記述方法という点については
僕自身まだまだ知らない部分があると思いますので…
僕も勉強しながら、勉強しながら、です。

スポンサードリンク

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly

 

Tags:, ,