SIRIUSでトップへ戻るボタンに画像を使用する方法
記事をスクロールなどすると、画面右下に以下のような「トップへ戻るボタン」が表示されますね。
今回は、上記のような「トップへ戻るボタン」を以下のような画像に変更する方法を紹介します。
トップへ戻るボタンに画像を使用する手順
1、画像を用意する
まずは、「トップへ戻るボタン」で利用するための画像を準備します。
今回は例として、以下の画像を利用させていただきました。
画像は画像編集ソフトなどを用いて適切な大きさにしましょう、（縦, 横）＝（100px, 100px）くらいがちょうど良いと思います。画像の背景は透明にして、「.png形式」で保存して下さい。
2、用意した画像をサーバーにアップロードする
次に用意した画像をFTPでサーバーにアップロードします、画像のURLはメモして置きましょう。
3、jQueryの読み込みとスクロールの記述を追加する
下記のコードをテンプレートのHTMLソース内にある のすぐ上にコピペしてください。トップページだけではなく、カテゴリページ、エントリーページも同じように記述してください。
<!--▼▼ jquery読み込み ▼▼-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--▼▼トップに戻るボタンを追加 ▼▼-->
<p class="pagetop"><img src="画像のURL" alt="ページTOPへ"></a></p>
<!--▼▼ スムーズスクロールの記述 ▼▼-->
<script type="text/javascript">
$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
上記コードの"画像のURL"の箇所に、先ほど用意した画像のURLを入れて下さい。
4、CSSを追加する
下記のCSSをテンプレートのCSSの最下部にコピペしてください。
/*-----------------
ページトップ
-------------------*/
.pagetop {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
}
.pagetop:hover {
cursor:pointer;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity:0.6;
zoom:1;
}
上記コードの
- bottom:10px;
- right:10px;
で画像を右下に配置しています。お好みで数値を変えて頂いてOKです。
以上のことを実践したらページトップへ戻るボタンに画像で表示できます、やってみてくださいね。
関連ページ
- シリウス（SIRIUS）で2カラムサイドメニュー幅変更方法
- デフォルトテンプレートの2カラムサイドメニュー幅変更方法について説明します。
- シリウスでサイドメニューのフリースペースを増やす方法
- シリウスでサイドメニューのフリースペースを増やす方法について説明します。
- SIRIUSシリウスで更新履歴の位置を変更する方法
- SIRIUSシリウスで更新履歴の位置を変更する方法について解説していきます。
- SIRIUSシリウスで更新履歴の背景画像を変更方法
- SIRIUSシリウスで更新履歴の背景画像を変更方法について、解説していきます。
- SIRIUSシリウスの更新履歴枠の角を丸くする&影をつける方法
- SIRIUSシリウスの更新履歴枠の角を丸くすると影をつける方法について解説していきます。
- SIRIUSでカーソルを置くとリンク画像を動かす設定方法
- SIRIUSでカーソルを置くとリンク画像を動かす設定方法について、詳しく解説していきます。
- SIRIUS サイドバーに画像付きのプロフィールを設置方法
- SIRIUS サイドバーに画像付きのプロフィールを設置方法について、詳しく解説していきます。
- SIRIUS クラスの設定機能で蛍光ペンを設定方法
- SIRIUS クラスの設定機能で蛍光ペンを設定方法について、詳しく解説していきます。
- SIRIUSに無料でメールフォームを設置する方法
- SIRIUS（シリウス）に無料でメールフォームを設置する方法について、詳しく解説していきます。
- SIRIUSで記事途中に飾り枠を挿入する方法
- SIRIUS（シリウス）で記事途中に飾り枠を入れる方法について、詳しく解説していきます。
- SIRIUS 同じページ内で指定の場所にリンクする方法
- SIRIUS 同じページ内で指定の場所にリンクする方法について、詳しく解説していきます。
- SIRIUSで動くボタンを作成方法
- SIRIUSで動くボタンを作成方法について、詳しく解説していきます。
- SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法
- SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法について解明します。
- SIRIUSで1つの記事を複数のカテゴリに登録する方法
- SIRIUSで1つの記事を複数のカテゴリに登録する方法について説明します。
- SIRIUSで蛍光ペンをカスタマイズする
- SIRIUSで蛍光ペンをカスタマイズする方法
- SIRIUSでトップへ戻るボタンを実装する方法
- SIRIUSでトップへ戻るボタンを実装する方法について紹介します。
- SIRIUSシリウスの見出しフォントに影をつける方法
- SIRIUSシリウスの見出しフォントに影をつける方法を紹介します。
- SIRIUSのサイトにYouTube動画を『埋め込み』方法
- SIRIUSのサイトにYouTube動画を『埋め込み』方法について紹介していきます。
- SIRIUSでGoogleマップをサイトに埋め込む方法
- SIRIUSでGoogleマップをサイトに埋め込む方法についてご紹介していきます。
- SIRIUSで画像を横に自動スライドさせて動かす方法
- SIRIUSで画像を横に自動スライドさせて動かす方法を紹介していきます。
- SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法
- SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法を紹介します。
- SIRIUS(シリウス）で<MAQUEE>タグを使って簡単に画像を動かす
- SIRIUS(シリウス）で
タグを使って簡単に画像を動かす方法をご紹介します。
