WordPress有料テーマのJINをお使いの方に、「上へ戻るボタン」のカスタマイズCSSを紹介します。
「上へ戻るボタン」に影をつけているデザインを実装している人は見かけないですよね？
完全に自己満ですが、人と違う見た目をしたい人には必見の記事です。
改めて、下記でお悩みの方は、CSSカスタマイズも5分でできるので、ぜひチャレンジしてみてください。
JINのカスタマイズで上に戻るボタンをおしゃれにしたい。
影をつけたCSSって画像についてるのを見るけど、上に戻るボタンには可能？
上に戻るボタンを透明にするのと、色も変えたい。
あいうえおLIFEぼくも「上へ戻るボタン」をCSSカスタマイズしてからは、テンション上がって、ブログ執筆スピードも向上しましたよ。
本記事の内容
- JINへCSSカスタマイズする準備
- 上へ戻るボタンに影をつけるCSS
- トップへ戻るボタン色と透明化
本記事を読むことで、JINユーザーの中で、ちょっと珍しいデザインのブログに仕上げることができますよ。
どうぞ、最後までご覧くださいね。
JINへCSSカスタマイズする準備
準備
- WordPress管理画面→[外観]→[カスタマイズ]→[その他設定]→[トップへ戻るボタンの表示]→[表示]に[●]をつけチェック状態にしておきます
- 上記で、デフォルトの「上に戻る」ボタンが「テーマカラー」の色で表示されます
トップへ戻るボタンが表示されないとき・・・
表示を確認したい場合・・・
いったん、Autoptimizeのプラグインは停止しておくことがおすすめ。
上へ戻るボタンに影をつけるCSS
CSSの追加
WordPress管理画面→[外観]→[カスタマイズ]→[追加CSS]にCSSコードをコピペします。
上記のCSSコードを追加すると、上へ戻るボタンに影がつきました。
あいうえおLIFEちょっとおしゃれ感が出現。
おまけ｜トップへ戻るボタン色と透明化
WordPress管理画面→[外観]→[カスタマイズ]→[追加CSS]にCSSコードをコピペします。
カラーコードで、上記の「#0e9de4;」をお好きな色のコードに変えてください。
まとめ｜上に戻るボタンに影つけてオシャレUP
本記事で紹介したCSSコードを[追加CSS]にコピペするだけで可能でしたね。
まとめ
上記を実装することで、JINユーザーの中で、ちょっと珍しいデザインのブログに仕上げることができました。
SWELLが気になる方は下記記事もどうぞ。
今日は最後まで読んで頂き、ありがとうございました！