「Blogger」ページの一番上にスクロールで戻るボタンを付けたい【T】

「Blogger」で読み応えのある長い記事を公開したとき、最後まで読み終えた読者が再びメニューや目次を確認するために、何度も画面をスクロールして戻るのが大変だと感じたことはありませんか？

スマートフォンの小さな画面では特に、指を何度も動かして一番上まで戻る操作が負担になり、他の記事を探す前にブログを離れてしまうなど、回遊率が下がってしまう原因のひとつになるかもしれません。

専用のボタンを画面の端に配置し、最上部へ瞬時に移動する設定を加えれば、読者が快適にブログ内を探索できる助けになるかもしれないので確認してみましょう。

ページの最上部に移動先となる目印のIDを設置する

「Blogger」のテーマ編集画面から、ボタンをクリックした際の着地点となる「ID」をページの冒頭部分に埋め込みます。

ブラウザはリンク先の末尾に「#top」などの記述があると、同じページ内にある特定の名前がついた要素を探してその位置まで画面を動かす仕組みを持っています。

ヘッダーのすぐ上など、読者が戻りたいと感じる最も高い位置にこの目印を置いておくことで、どれだけ長い記事であっても正確に一番上まで誘導することが可能になります。

以下の手順で、テンプレートの冒頭に移動先の目印を作成してみてください。

アドバイスとして、このIDを設置する場所が低すぎると、ボタンを押してもロゴなどが隠れた中途半端な位置で止まってしまうため、必ずメインコンテンツよりも上の位置に配置するよう配慮するのがポイントです。

移動先の準備ができたら、次に読者がクリックするための「ボタン」となるリンクをHTMLコードの末尾付近に追加します。

先ほど作成した目印を呼び出すために、リンク先には先ほど決めたID名を指定し、画面のどこにいても機能するように設定を行います。

このボタンは後にCSSで見た目を整えることになりますが、まずはHTMLとして正しくリンクが機能し、クリックした際に一瞬で最上部へ戻るかどうかを確認する土台を作ります。

ボタンのコードを配置する際は、以下の操作を行ってみてください。

注意点として、HTMLを編集する際に既存のタグを消してしまうと、ブログ全体のレイアウトが崩れてしまう恐れがあるため、作業前に必ず「バックアップ」を取って安全を確保する必要があります。

追加したボタンが常に画面の右下などに表示されるよう、CSSを使って「固定配置」と「視覚的な装飾」を施します。

特定の命令を指定すれば、読者が記事を読み進めて画面をスクロールさせても、ボタンは決まった位置に留まり続け、必要なときにいつでも押せるようになります。

自分のブログのテーマカラーに合わせた配色や、マウスを乗せたときに色が少し変わる演出を加えることで、単なる機能としてのボタンをブログデザインの一部として魅力的に見せることが可能です。

ボタンを使いやすくデザインするために、次の設定を試してみましょう。

CSSの追加欄に #to-top { position: fixed; bottom: 20px; right: 20px; } と記述して位置を固定します。
background: #333; color: #fff; padding: 10px; border-radius: 5px; を入力して形と色を整えてください。
最後に html { scroll-behavior: smooth; } を追記して、滑らかな移動になるよう配慮します。

アドバイスとして、ボタンの中に「↑」のような記号を使ったり、文字の大きさを微調整したりすることで、スマートフォン利用者にとっても押しやすく、直感的に役割が伝わる親切な設計に仕上げられます。