2,094wonder

中国人夫とのJAPAN LIFE

コピペOK!上(トップ)に戻るボタンを設置。レスポンシブ対応[はてなブログCSSカスタマイズ]

f:id:japantk:20190607143037j:plain
「上に戻るボタン」を設置しました!

 

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

azanaerunawano5to4.hatenablog.com

 

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

変更前(コピペそのままの状態)

f:id:japantk:20190312134950p:plain

 

f:id:japantk:20190312134914p:plain

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

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

 

 

変更後(位置・サイズ・色)

f:id:japantk:20190312135018p:plain

 

f:id:japantk:20190312134854p:plain

 

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

 

マウスオーバーの色(PCのみ)

f:id:japantk:20190312135052p:plain

 

 

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

このブログで使っている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>