アメブロの、新CSS編集用デザインを含む現行の新デザインでは、旧CSS編集用デザインの世代にはあった「ページのトップへ戻るボタン」がありません。
そこで、新CSS編集用デザインで、ページのトップへ戻るボタンを設置する方法を考えてみました。
期待する動作
理想的な期待する動作としては、
- ページを開いた時は表示されていない
- いくらかスクロールすると表示される
- クリックするとページの一番上までスムーススクロールする
としたいですが、1と2はJavaScriptが必要そうなので現状のアメブロでは無理と考え、ひとまず3だけ実現しました。
今後、1や2も実現できる方法が見つかったら追記したいと思います。
ボタン用の画像を用意してアメブロにアップロード
まず、「ページトップへ戻るボタン」で使う画像を用意して、アメブロにアップロードして下さい。
画像は、例えばこちらの無料イラストサイトなどで入手可能です。
画像をアップロードできたら、その画像のURLを取得しておいて下さい。
フリースペースにHTMLタグを記述
ボタン本体の設置には、フリースペースを利用します。
フリースペースに、次のようなリンク付きの画像タグ(imgタグ)を記述して下さい。
<a href="#" title="ページトップへ" id="scroll-to-top"><img alt="ページトップへ" src="ボタンにしたい画像のURL"></a>「ボタンにしたい画像のURL」の箇所は、このボタンのためにアップロードした画像のURLに変更して下さい。
また、用意した画像が大きい場合は、以下のように、imgタグにwidthやheightといった表示サイズの属性指定をしておくと良いでしょう（CSSでサイズ指定しますので必須とまでは言えません）。
<a href="#" title="ページトップへ" id="scroll-to-top"><img alt="ページトップへ" src="ボタンにしたい画像のURL" width="70" height="70"></a>HTMLタグを記述できたら、「保存ボタン」をクリックして保存して下さい。
なお、フリースペースをサイドバーに表示するようになっていない場合は、サイドバーに表示するように設定して下さい。
CSSを追加
次は、CSSを編集します。
以下のようなコードをCSSの末尾に追加して下さい。
/*********************************************************
新CSS：トップへ戻るボタンを設置する
*********************************************************/
html{
scroll-behavior: smooth;
}
#scroll-to-top {
position: fixed;
z-index: 9999;
right: 20px; /* ボタンの位置（右から？ピクセル） */
bottom: 20px; /* ボタンの位置（下から？ピクセル） */
width: 70px; /* ボタンの大きさ（横幅） */
height: 70px; /* ボタンの大きさ（高さ） */
}ちなみに、scroll-behavior: smooth;がスムーススクロールさせるための設定ですが、他のボタンによるスクロールにも影響しますので、万が一問題がある場合は外して下さい。
外しても、スムーススクロールではなくなるだけで、ページトップへ戻るボタンとしては問題なく機能します。
ボタンの位置や大きさは、好みがあると思いますので、必要に応じて適宜修正して下さい。
保存して確認
CSSにコードを追加し、必要な修正ができたら保存して表示確認をします。
右下にボタンが表示され、クリックするとページの一番上までスムーズスクロールすれば成功です。
まとめ
以上、新CSS編集用デザインのアメブロのパソコン向け画面に、ページのトップへ戻るボタンを設置する方法をご紹介しました。
- ボタン用の画像を用意してアメブロにアップロード
- フリースペースにHTMLタグを追加
- CSSをコピペして必要に応じて修正
- 保存して確認
という手順になります。
JavaScriptを使えないため簡易なものとなりますが、これで「ページのトップへ戻る」ボタンとして動作しますので、よかったら試してみて下さい。
