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