メニュー

【JIN】上(トップ)へ戻るボタンに影をつけるカスタマイズ【CSS】

JIN上へ戻る影をつける.003
本記事のまとめ

WordPress有料テーマのJINをお使いの方に、「上へ戻るボタン」のカスタマイズCSSを紹介します。

「上へ戻るボタン」に影をつけているデザインを実装している人は見かけないですよね?

完全に自己満ですが、人と違う見た目をしたい人には必見の記事です。

改めて、下記でお悩みの方は、CSSカスタマイズも5分でできるので、ぜひチャレンジしてみてください。

JINのカスタマイズで上に戻るボタンをおしゃれにしたい。

影をつけたCSSって画像についてるのを見るけど、上に戻るボタンには可能?

上に戻るボタンを透明にするのと、色も変えたい。

あいうえおLIFE

ぼくも「上へ戻るボタン」をCSSカスタマイズしてからは、テンション上がって、ブログ執筆スピードも向上しましたよ。

本記事の内容

  1. JINへCSSカスタマイズする準備
  2. 上へ戻るボタンに影をつけるCSS
  3. トップへ戻るボタン色と透明化

本記事を読むことで、JINユーザーの中で、ちょっと珍しいデザインのブログに仕上げることができますよ。

どうぞ、最後までご覧くださいね。

記事を書いた人

あいうえおLIFE笑顔
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:3万〜4万円 / 月

記事を書いた人

あいうえおLIFE笑顔
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQ・ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:3万〜4万円 / 月
タップできるもくじ

JINへCSSカスタマイズする準備

上へ戻るボタンに影の記事見出し1
Designed by Freepik

準備

  • WordPress管理画面→[外観]→[カスタマイズ]→[その他設定]→[トップへ戻るボタンの表示]→[表示]に[●]をつけチェック状態にしておきます
  • 上記で、デフォルトの「上に戻る」ボタンが「テーマカラー」の色で表示されます

トップへ戻るボタンが表示されないとき・・・

「高速化」のために入れている、AutoptimizeのプラグインでのCSSの圧縮などを実装していると、一部起こることがあります。

表示を確認したい場合・・・

いったん、Autoptimizeのプラグイン停止しておくことがおすすめ。

上へ戻るボタンに影をつけるCSS

上へ戻るボタンに影記事見出し2つ目
Image by jcomp on Freepik

CSSの追加

WordPress管理画面→[外観]→[カスタマイズ]→[追加CSS]にCSSコードをコピペします。

上記のCSSコードを追加すると、上へ戻るボタンに影がつきました。

あいうえおLIFE

ちょっとおしゃれ感が出現。

おまけ|トップへ戻るボタン色と透明化

上へ戻るボタンに影をつける記事見出し3つ目
Designed by pikisuperstar / Freepik
おまけCSS

WordPress管理画面→[外観]→[カスタマイズ]→[追加CSS]にCSSコードをコピペします。

background-color: #0e9de4;/背景色/

カラーコードで、上記の「#0e9de4;」をお好きな色のコードに変えてください。

まとめ|上に戻るボタンに影つけてオシャレUP

JIN上へ戻る影をつける.003

今回は、「JINのカスタマイズで上に戻るボタンをおしゃれにしたい・影をつけたCSSって画像に見るけど、上に戻るボタンには可能?・上に戻るボタンを透明にするのと、色も変えたい」ついて紹介しました。

本記事で紹介したCSSコードを[追加CSS]にコピペするだけで可能でしたね。

まとめ

上記を実装することで、JINユーザーの中で、ちょっと珍しいデザインのブログに仕上げることができました。

デザインよりも、記事の質と量ですので、執筆もガツガツがんばりましょう。

SWELLが気になる方は下記記事もどうぞ。

今日は最後まで読んで頂き、ありがとうございました!

スポンサーリンク

タップできるもくじ