SANGOのカスタマイズサイト
JIN

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

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

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


BEFORE


AFTER


 

こんな感じで変更したよ

MENくん
MENくん
ボタンを大きくして、後ろが透けるようにしてみたよ
くま３号
くま３号
クマの大きな手にも優しいデザインだな
Contents
  1. カスタマイズの準備
  2. カスタマイズのコード
  3. まとめ

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。 追加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のメインカスタマイズ（？）サイトはこちら


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

JINのカスタマイズまとめページ

 

for men
for men｜やってみるをサポート
関連記事