JIN

JINカスタマイズ|上に戻るボタンを大きくする

上に戻るボタンをカスタマイズ
カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。
この記事では

上に戻るボタンをカスタマイズしてみました。


BEFORE


AFTER


 

こんな感じで変更したよ

MENくん
MENくん
ボタンを大きくして、後ろが透けるようにしてみたよ
くま3号
くま3号
クマの大きな手にも優しいデザインだな

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。 追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

コード(コメントあり)

/**上に戻るボタン**/
@media (max-width: 767px){/*スマホ表示での設定*/
#page-top a {/*上に戻るボタン*/
width: 60px;/*幅*/
height: 60px;/*高さ*/
padding: 18px 6px 6px;/*内側の余白*/
font-size: 1.2rem;/*アイコンの大きさ*/
opacity: .6;/*透明度60%*/
background: white!important;/*絶対白*/
color: #424242;/*アイコンの色*/
border: 2px solid #424242;/*枠線の色*/
}}

 

MENくん
MENくん
スマホで見るときだけ、設定しています
コード(コメントなし)

/**上に戻るボタン**/
@media (max-width: 767px){
#page-top a {
width: 60px;
height: 60px;
padding: 18px 6px 6px;
font-size: 1.2rem;
opacity: .6;
background: white!important;
color: #424242;
border: 2px solid #424242;
}}

 

まとめ

押しやすい大きさの方がいいかもしれませんね。

SANGOのメインカスタマイズ(?)サイトはこちら


ここにボックスタイトルを入力