ページトップに戻るボタンを作成

ページ内を素早く移動したいです

ページ内の素早い移動に必要な目次は前回つくりました。

今回は ページのトップに戻るボタン があったほうがいいかなと思い、作ってみました。

文章が長くなってくると、下までスクロールして記事を読んだ後に、ページトップまで戻るのが面倒ですよね。

ページトップに戻るボタンがあれば便利です。

下記の方々の記事を参考にさせて頂きました。ありがとうございます。

これは ガジェットの追加 で行う方法です。

フッターのガジェットで、自分の好きなイラストを使用して、ページトップに戻るボタンを作ることができます。

①　自分の好きなイラストを作成してページ内にアップする

私はパワポを使ってpng形式で矢印をつくりました。

その画像をBlogger内のページという場所に保存します。

ページ → +新しいページをクリック　

するとブログ記事を作成、投稿するときと同じようなページが立ち上がります。

そこに下記のように、ブログの記事に写真をアップするときと同じ方法で自分の好きなイラストをアップします。

アップした画像を右クリック → 画像アドレスのコピーを選択

私の場合は下記がコピーされました。

②　画像アドレスをコードに組み込んでフッターのガジェットに追加する

編集画面で

レイアウト → フッター → ガジェットを追加 → HTML/JavaScript をクリック

下記の画面がでてくるので、タイトルはいれずに、コンテンツの部分に下記のコードをコピペ。

※ボタン画像のURL を先ほど作成したアドレスに置き換える。

また 40 を変更することで、イラストのサイズを変更可能です。

私はそのままにしました。

保存すると、下記のようにページトップに戻るボタンが現れました。

・トップページに戻るボタンを作成しました。

・ボタンは好きなイラストに設定できます。

・これで素早くページ内を移動できます。

自分がこれいいなと思ったものは大抵誰かがwebで解説してくれています。

みなさんすごいですね。