トップへ戻るボタンを実装する方法
下記のコードをテンプレートのHTMLソース内にある17行目 のすぐ上にコピペする。トップページだけではなく、カテゴリページ、エントリーページも同じように記述する。

 

 

 

トップへ戻る

 

 

 

以上までを貼り付けする。

 

 

 

 

リンク先は当サイトの場合「container」という「id」になっています。自分のサイトに合わせて「container」や「header」などに変更して下さい。

 

上記の「100」という数字は、上から何px スクロールしたら表示させるのかを指定しています。今回は「100px」です。

 

「500」という数字は、スクロールの速度です。数字が小さいほど早くスクロールします。

 

CSSを追加する

 

下記のCSSをテンプレートのCSSの最下部にコピペしてください。

 

/*--ページトップ--*/

 

.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #f39800;
text-align: center;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 10px 10px;
border-radius: 20px;
box-shadow: 5px 5px 5px #AAA;

 

}
.pagetop a:hover {
display: block;
background-color: #1e50a2;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 10px 10px;
border-radius: 20px;
box-shadow: 5px 5px 5px #AAA;

 

}