WordPressテーマをJINからSWELLに変更SWELL公式サイト

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

本記事のまとめ

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

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

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

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

  • JINのカスタマイズで上に戻るボタンをおしゃれにしたい
  • 影をつけたCSSって画像に見るけど、上に戻るボタンには可能?
  • 上に戻るボタンを透明にするのと、色も変えたい
あいうえおLIFE

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

本記事の内容

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

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

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

もくじ

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

準備

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

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

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

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

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

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

CSSの追加

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

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

あいうえおLIFE

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

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

おまけCSS

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

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

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

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

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

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

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

まとめ

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

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

それでは、今日はここまで読んでいただきありがとうございます!

人気記事A8のセルフバック【自己アフィリ】で5万円稼ぐ案件とは?【体験談】

もくじ
閉じる