【Blogger/QooQ】top(ウインドウ上部)に戻るボタンの設置:簡易/画像Ver.

2020-12-13

Blogger プログラミング

B!

瞬時にページの上に飛ぶタイプです。


フリーのBloggerテンプレート「QooQ」のカスタマイズについてまとめています。
参考程度に。

尚、カスタマイズはバックアップを取った上、自己責任で行うようにしてください。





画像の用意

各々こんな感じのお好きな画像を探してください。
自分が良く使うのはこういったところです。
いつもありがたく使わせていただいております。
無料って本当にすごいです。頭が下がります

画像のアップロード

記事やページから普段画像を載せるように使いたい画像をアップロードします。
既にアップしている画像を使用する場合は適宜画像を選択してください。

投稿画面のメニューバーの写真のマークをクリック

「パソコンからアップロード」をクリック

「ファイルを選択」をクリックし、使いたい画像を選択

アップロードが完了したら写真を選択し、「選択」をクリック

レイアウトの選択はそのまま、「OK」をクリック

画像URLのコピー

このようなコードが出てくると思うので、
※出てこない場合はメニューバーの一番左の編集モードを「HTMLビュー」に切り替えてください。
<div class="separator" style="clear: both;"><a href="画像のurl" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="600" data-original-width="800" src="画像のurl"/></a></div>
src=以下の"画像のurl"をコピーします。

ガジェットの追加

レイアウトから任意の場所にガジェットの追加

ガジェットの中から「HTML/JavaScript」を探し、右上の+ボタンで追加します。

ソースコード

あとはガジェットの「コンテンツ」に以下のようなソースコードを追加して、先程コピーした"画像のurl"を置き換えて完了。
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" >
<img src="画像のurl" height="40" width="40" />
</a>
各種パラメータはご自由にどうぞ。



ブログランキング・にほんブログ村へ

Translate

魔王と愉快な仲間

このブログを検索

ラベル

ブログ アーカイブ

メッセージ

名前

メール *

メッセージ *

Powered by Blogger.

フリー写真素材ぱくたそ

QooQ