コピペOK！上（トップ）に戻るボタンを設置。レスポンシブ対応［はてなブログCSSカスタマイズ］

「上に戻るボタン」を設置しました！

▼基本を参考にさせていただいたサイト

azanaerunawano5to4.hatenablog.com

スマホで表示（レスポンシブ）したときに、サイズが大きかったのでオリジナルでサイズ、色、位置変更を行いました。 

変更前（コピペそのままの状態）

うん、スマホは大きすぎて写真に被ります。

押しやすいんですけどね。

変更後（位置・サイズ・色）

小さくなって、記事の邪魔にならなくなりました！位置変更はPCのみに適応されてスマホは特に変わっていません。

マウスオーバーの色（PCのみ）

 変更したカスタマイズ内容

このブログで使っているCSSカスタマイズ

/*上に戻る*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
font-size:10px;　…サイズ変更
}
#move-page-top{
color:rgba(0,0,0,0.3);　…カーソル合わせる前の色
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(234,124,124);　…カーソルを合わせたときの色
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -650px;    …位置をちょっと右にずらす
}
}
{
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}

こちらで完了です！

 おまけ

このシンプルな枠が気に入ったので、メモしておきます。CSSではなくHTML単発で挿入しています。 

枠のHTML

1. <fieldset>
2. <legend>タイトル</legend>
3. 枠線で囲まれる文章です
4. </fieldset>