JINカスタマイズ

【WordPress】【JIN】トップへ戻るボタンのCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、トップへ戻るボタンのCSSカスタマイズについてご紹介します。

トップへ戻るボタンは、画面右下にあるボタンで、画面最上部までスクロールしてくれます。

便利な機能ですが、カラー設定の「フッターの背景色」と同じ色なので、デフォルト(初期設定)のままだと、色が同化して見づらいです。なので、色やサイズを変更することがオススメです。

BeforeAfter

WordPress有料テーマ【JIN】を使っている方向けの記事です。

トップへ戻るボタンの表示・非表示の設定方法

まず、トップへ戻るボタンの表示・非表示の設定方法をご紹介します。

  1. WordPressの編集画面から、「外観」→「カスタマイズ」を開きます
  2. 画面左の「その他設定」を開きます
  3. 「トップへ戻るボタンの表示」の表示にチェックを入れます
  4. 画面上部の「公開」を押します

トップへ戻るボタンの設定ができました‼

画面右下にトップへ戻るボタンが表示されていることを確認してください。

トップへ戻るボタンのCSSカスタマイズ

では、CSSにコードを追加して、トップへ戻るボタンをカスタマイズしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください

CSSにコードを追加する方法はコチラ↓
【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。【追加CSS】...

コード

/*---トップへ戻るボタン---*/
#page-top a {
background-color: #aaa;/*色*/
color: #aaa;/*「^」の色*/
border: 2px solid #aaa;/*枠線の太さと色*/
opacity: 0.8;/*透明度80%*/
transform: scale(1.0);/*サイズ*/
}
/*---トップへ戻るボタン---*/

/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

#page-top a {
background-color: #aaa;
color: #aaa;
border: 2px solid #aaa;
opacity: 0.8;
transform: scale(1.0);
}

説明

#aaaには、お好みのカラーコードを入れてください。

  • background-color → トップへ戻るボタンの色
  • color → 内側の「^」の色
  • border → 枠線の太さ(px), 枠線の種類(solid), 枠線の色(#aaa)
  • opacity → 透明度 0.0~1.0の値で設定 デフォルト(初期設定)は100%(不透明)
  • transform → サイズ デフォルト(初期設定)はscale(1.0)

トップへ戻るボタンのCSSカスタマイズができました‼

不必要なコード(行)は削除し、お好きなカラーコードと数値を入れてカスタマイズしてみて下さい!

非表示にするCSSコード

上記のCSSカスタマイズに加えて、パソコンやスマホの画面上でトップへ戻るボタンを非表示にするコードをご紹介します。

パソコンの画面上でトップへ戻るボタンを非表示にするコード

@media all and (min-width:768px){
#page-top a{
display:none;
}
}

スマホの画面上でトップへ戻るボタンを非表示にするコード

@media all and (max-width:767px){
#page-top a{
display:none;
}
}

パソコンの画面上で「^」の位置を修正するコード

さらに、パソコンの画面上で「^」の位置が若干ズレているのが気になる方は、以下のコードをCSSに追加してみて下さい。上下左右から中央に寄せるカスタマイズです。

@media all and (min-width:768px){
#page-top .jin-ifont-arrow-top {
position: absolute;
top:50%;
left:50%;
transform : translate(-50%,-50%);
}
}

当ブログのトップへ戻るボタンのCSSカスタマイズ

当ブログのトップへ戻るボタンは、以下のコードをCSSに追加してカスタマイズしています。

#page-top a {
background-color: rgba(204, 0, 170, 0.8);
border: 2px solid #fff;
transfom: scale(1.2);
}
@media all and (min-width:768px){
#page-top .jin-ifont-arrow-top {
position: absolute;
top:50%;
left:50%;
transform : translate(-50%,-50%);
}
}

opacityを使うと、トップへ戻るボタン全体的に透明度を付けることができますが、枠線と内側の「^」には透明度を付けたくない場合、rgba(***,***,***,*.*)を使うと、背景のみ透明度を付けることができます。

編集後記

特にスマホの画面でトップへ戻るボタンが見づらかったので、カスタマイズしてみました。

【WordPress】【JIN】スマホ固定フッターメニューの下部の余白を消す方法【WordPress】有料テーマ【JIN】を使っている方向けに、スマホ固定フッターメニューの下部の余白を消す方法についてご紹介します。...
【WordPress】【JIN】目次の「表示・非表示」の色のCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、目次の「表示・非表示」の色のCSSカスタマイズについてご紹介します。プラグイン「Table of Contents Plus」をインストールし、CSSにコードを追加することで目次の「表示・非表示」の色をカスタマイズします。...
【WordPress】【JIN】スマホの背景色を変えるCSSカスタマイズ★オススメ★【WordPress】有料テーマ【JIN】スマホの背景色を変えるCSSカスタマイズについて書きました。標準設定では変えられないスマホの背景色を変えることができるカスタマイズなので、オススメです。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ