ページ内を素早く移動したいです
ページ内の素早い移動に必要な 目次 は前回つくりました。
今回は ページのトップに戻るボタン があったほうがいいかなと思い、作ってみました。
下までスクロールした後に一気にページトップまでもどれる？
文章が長くなってくると、下までスクロールして記事を読んだ後に、ページトップまで戻るのが面倒ですよね。
ページトップに戻るボタンがあれば便利です。
下記の方々の記事を参考にさせて頂きました。ありがとうございます。
これは ガジェットの追加 で行う方法です。
フッターのガジェットで、自分の好きなイラストを使用して、ページトップに戻るボタンを作ることができます。
① 自分の好きなイラストを作成してページ内にアップする
私はパワポを使ってpng形式で矢印をつくりました。
その画像をBlogger内の ページ という場所に保存します。
ページ → +新しいページ をクリック
するとブログ記事を作成、投稿するときと同じようなページが立ち上がります。
そこに下記のように、ブログの記事に写真をアップするときと同じ方法で自分の好きなイラストをアップします。
アップした画像を右クリック → 画像アドレスのコピーを選択
私の場合は下記がコピーされました。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22htn8CVe1y1PvytmHKaCkmwvJ_KUyo1Om02d-zWZugG4hdGIBS583yhsdoyHis5rAJQoTnKoShEb0fZp7N5JaffnwGyjJRFdFxkMaG5Wd_UhP0WCo5xHo00CgGGlyo-pwwUkmdsdB3OdPMaSLDP0W855YNhRjxjVNf1II-7Sh7vUjOR2UZzbgTiSAQ/s320/%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E7%9F%A2%E5%8D%B0.png
② 画像アドレスをコードに組み込んでフッターのガジェットに追加する
編集画面で
レイアウト → フッター → ガジェットを追加 → HTML/JavaScript をクリック
下記の画面がでてくるので、タイトルはいれずに、コンテンツの部分に下記のコードをコピペ。
<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>
※ボタン画像のURL を先ほど作成したアドレスに置き換える。
また 40 を変更することで、イラストのサイズを変更可能です。
私はそのままにしました。
まとめ
・トップページに戻るボタン を作成しました。
・ボタンは好きなイラストに設定できます。
・これで素早くページ内を移動できます。
自分がこれいいなと思ったものは大抵誰かがwebで解説してくれています。
みなさんすごいですね。
0 件のコメント:
コメントを投稿