【ブログ編集】Bloggerで「TOPに戻る」半透明ボタンを配置する。

Bloggerに「TOPに戻る」ボタンを設置する方法！ついでに、独自画像を使って半透明にしてみました。

ブログの文章が長くなったら、「TOPに戻る」ボタンがほしくなりました。

いくつかのサイトでやり方を調べて見たのですが、そのうち最も簡単なものを使い、ちょっとだけ手を加えました。

折角なので、ちょっと変わったボタンと言うことで、画像をボタン代わりにして、ついでに半透明にしてみました。

今回の編集で当初は、ボタンが広告の下に隠れてしまうと言う状況になってしまい、あきらめかけたのですが、下で説明したとおり、1行追加で治ったので、助かりました。

それでは、前半で設置の方法、後半でコードの簡単な説明をします。

トップに戻るボタンの設置の流れ

先ずはボタンにする画像を決めて、加工します。サイズは何でもOKです。

私は、ゲゲゲの鬼太郎に登場するアニエスの画像を使ってみました。

©水木プロ・フジテレビ・東映アニメーション

こんな感じで画像にペイントで文字と矢印を書き込んでやりました。

タテヨコ比は特に決まりは無いので、お好きな比率でOKです。

配置したときのバランスを見て、好みで良いと思います。

次に、Bloggerのページ（投稿でもOKです）を新規作成して、作成した画像を貼り付けます。

画像を貼り付けたら、右クリックで「画像アドレスをコピー」をクリック。


コピーしたら、ページは保存して置きます。（公開しなくて良い）

使用するコードは以下の通りです。


<a rel="nofollow" style="display:scroll;position:fixed;bottom:70px;right:25px;z-index: 999;" href="#" title="Back to Top">
<img src="ボタン画像のURL" height="auto" width="80" style="opacity: 0.7;" /></a>


そして、コードの「ボタン画像のURL」のところに、今コピーした画像のURLを貼り付けます。




黄色で塗りつぶしてあるところが、画像のアドレスです。

ここまで出来たら、後は、レイアウトのヘッダーでガジェットを追加し、「HTML/JavaScript」を追加して、今作ったコードを貼り付けて保存します。



以上で設置完了です。PCとスマホで表示を確認してください。

トップに戻るボタンの編集

ボタンの配置

<a rel="nofollow" style="display:scroll;position:fixed;bottom:70px;right:25px;z-index: 999;" href="#" title="Back to Top">

赤字の部分で調整します。

bottom:70px→ここの数字を大きくすると、ボタンが上に上がり、小さくするとボタンが下に下がります。

right:25px→ここの数字を大きくすると、左に移動し、小さくすると右に移動します。

z-index: 999→当初は入れてなかったのですが、ボタンが広告の下に隠れるので、追加しました。レイヤの一番上に持ってくる設定でしょうか？良く解りませんが、調整は必要ありません。

ボタンのサイズと透明度

これも赤字の部分で調整します。

<img src="ボタン画像のURL" height="auto" width="80" style="opacity: 0.7;" /></a>

ちなみにこの設定では、高さは自動で調整されるので、幅で調整します。autoの替わりに数字を入れれば、タテヨコ別々にサイズが変更できます。

width="80"→ここの数字を大きくするとボタンが大きくなります。小さくすると縮みます。

style="opacity: 0.7→この数字を1.0にすると不透明になります。数字が小さいほど画像は透明になります。

難易度はそれ程高くないと思いますので、お試しください。