はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

ページの上へ戻るボタンを好きな画像で設定

記事名と
URLをコピー

サイトの上部へすぐに戻れるボタンを設置しました。

記事が長い時や記事一覧を見ている時、上へ戻るのが面倒だったんです。これですぐにトップへ戻ることができます。便利。

せっかくなので、自分で作った画像を設定できるタイプを選びました。

完成動作見本

f:id:yaanon:20201229175624g:plain

右下に表示されます。ある程度ページを下げると出現し、上に戻すと消えます。押すとサイトトップまでビュンと飛びます。

参考サイト

参照させていただいたのは以下のサイトです。ありがとうございます!!

【コピペで出来るよ!】好きな画像を使って「PageTop(ページトップ)に戻る」ボタンを設置しよう。 - Milkのメモ帳

説明が丁寧だし、設定も簡単でした!

いちばん時間が掛かったのは、ボタン用に絵を描いた部分です。笑
そのくらい、コード設置と動作確認はすぐできました。

今回、コード内容は何も変えていないので、コードを書くのは省略します。

画像サイズの数値は「65」にしてみました。

追記:このボタンのために、イラストを修正しましたが、他に使う所もないのでここに貼っておきます。
ラクガキアイコン、ちょっとだけ線が整いました。なんかおめめのきらきら感が強まった。

f:id:yaanon:20201229182223p:plain

↑これは押してもなにも起こりません。笑

※2021年1月17日追記:ボタン設置後は、状況に合わせてサイズなど微調整しています。