コピペでトップへ戻るボタンを導入する

このブログにもようやく、ページトップへ戻るボタンを導入しました。

j160313-08.gif

少し下へスクロールすると、画面の右下の隅に▲の印が表示されます。これがボタン。ボタンをクリックすると、するするとページのトップに戻ります。

※今までも「このページの先頭へ」というリンクを一番下に表示していました。でも、ボタンを導入すると、ページのどの位置からでも戻れるようになります。

やり方やデザインはいろいろあります。

このブログで導入した方法は…
  • 半透明のボタンなので、文字が被っても見えます。
  • ▲は文字です。画像を用意する必要はありません。▲の代わりに、「ページトップへ」のような文字を使うこともできます。
  • ページの一番上では非表示です。スクロールすると現れます。


「難しいことはわからないよー」という方も導入できます!
3回のコピペでできる方法を書きますので、安心してください。

では、いきます!

 
1.ボタンを作る
ボタンはCSSで作ります。

(1)CSSをコピー
このソースをそのままコピーしてください。

/* トップへ戻るボタン */
#scroll-top {
position: fixed;
right: 20px;
bottom: 20px;
display: none;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
color: #fff;
-webkit-border-radius: 6px; /* Safari,Google Chrome用 */
-moz-border-radius: 6px; /* 角を6px丸くする */
border-radius: 6px; /* 角を6px丸くする */
background-color: #666; /* ボタンの背景色 */
filter:alpha(opacity=50); /* 50%透過 */
-moz-opacity: 0.5;
opacity: 0.5;
}

#scroll-top p { /* ボタンのテキスト部分 */
font-weight: bold;
line-height: 50px;
margin: 0 0 0 0;
font-size: 22px;
}


(2)CSSを編集する「デザイン設定」画面を開く

j160313-01.gif

古いブログデザインの場合、そのまま下にスクロールして…
j160313-02.gif
スタイルシート名をクリックします。

新システムの場合、
j160313-03.gif
「スタイルシート編集」タブをクリックします。


(3)CSSをペースト

CSSを枠の中にペーストします。
どの場所がいいか分からない人は、一番下にペーストしてください。
そして、「保存」ボタンをクリックします。

CSSの設定は以上!


2.HTMLヘッダーに記述

(1)コピーするコードその2。

このコードをコピーしてください。




ペーストする先は、HTMLのヘッダーです。

旧システムでは…
j160313-04.gif
HTMLはここ。編集するHTML名をクリックします。
j160313-05.gif
</head> の直前にペーストします。

新システムでは…
j160313-06.gif
「HTML編集」タブに移動します。
そして、</head> の直前にペーストします。


(2)コピーするコードその3。

そして、これが最後のコピペ。
コードをコピーします。







今度は、同じHTML編集画面の、一番下…
j160313-07.gif
</body>の直前にペーストペーストします。

そして、保存ボタンをクリック。

これで終了です!

ブログのページを開いて、リロードしてください。こんな↓感じで、右下にボタンが表示されているはずです。

j160313-08.gif

できなかったときは…サポートはできないのでごめんなさい。


↑読んだよ報告お願いします!


[参考リンク]
今回のカスタマイズで参考にさせていただきました。


この記事へのコメント

  • ハニエル

    こんばんは^^

    大変ご無沙汰しています。
    時々、お邪魔していました。

    スッキリ、可愛らしくカスタマイズされていますね♪

    実は…ブログタイトル変更のお知らせです。
    Yahoo!ポイントがTポイントに統合されて、廃止されてしまったので…^^;

    新しいタイトルは
    「Amazonギフト券・Tポイントを貯める方法」
    にしました。

    お手数ですが、お時間のある時に、
    「Yahoo!ポイントを貯める方法」から
    修正して下さいますか。

    よろしくお願いします^^
    失礼します☆
    2016年08月09日 18:43
  • もも

    ◆ハニエルさん
    気に留めていてくだったんですね。ありがとう!
    さっそくサイト名を修正しました。
    2016年08月09日 18:54
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/434873513

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック


SPONSORED LINK