SWELLのトップへ戻るボタンを画像に変更する方法
![ページトップへ戻るボタンのカスタマイズ](https://popo-design.net/wp/wp-content/uploads/2024/03/pagetop-button-banner-1024x512.webp)
WordPressテーマの「SWELL」のページ下、「ページトップへ戻るボタン」を画像に変更する方法を記載します。
テーマ内では変更する機能が付いていないので、CSS側を直接触って元のアイコンを非表示にした後、画像を追加して表示させます。
![ページトップへ戻るボタン](https://popo-design.net/wp/wp-content/uploads/2024/03/page-top-button.webp)
子テーマもしくはstyle.cssにタグを追加する
swell_childの子テーマ内のstyle.cssに以下のタグを追加するか、ややこしければWordPress管理画面の「外観」→「カスタマイズ」→「追加 CSS」の中に以下をコピペして追加してください。
- /* トップへ戻るボタン
- ----------------------------------*/
- .c-fixBtn {
- align-items: center;
- background: initial;
- border: initial;
- border-radius: initial !important;
- box-shadow: initial;
- color: initial;
- cursor: initial;
- display: flex;
- flex-direction: column;
- height: 80px; /* 画像サイズごとに数字を変える */
- justify-content: center;
- letter-spacing: normal;
- line-height: 1;
- opacity: .75;
- overflow: hidden;
- text-align: center;
- transition: all .25s;
- width: 80px; /* 画像サイズごとに数字を変える */
- background: url(' ここにアップロードした画像のURLを貼り付ける ');
- }
- .icon-chevron-small-up:before, .icon-chevron-up:before {
- content: initial;
- }
- .hov-bg-main:hover {
- background-color: initial !important;
- color: initial !important;
- }
元々付いているタグはそのまま使用しています。
「initial;」や「!important;」の記述が多いのは、元のボタンを消すためのタグです。
※22行目の「ここにアップロードした画像のURLを貼り付ける」のところは、あらかじめ「メディア」から画像をアップしておき、画像のURLをコピーして貼り付けます。
![アイコン画像をアップロードする](https://popo-design.net/wp/wp-content/uploads/2024/03/swell-pagetop-button-1024x490.jpg)
保存して公開すると、ボタンが非表示になって画像に変更されているのを確認できれば完了です。
![](https://popo-design.net/wp/wp-content/uploads/2024/03/page-top-buttun2.webp)
少しの手間でデザインが変えられるので、細かいパーツもカスタマイズしたい人へオススメです。
[公開日] 2024年3月1日 / [最終更新日] 2024年3月14日 / カテゴリー:WEBデザイン
同じカテゴリーの記事
-
イラストにおすすめスキャナー・CanoScan LiDE 400レビュー
アナログで描いたイラストの線画をきれいにスキャンするためのスキャナーを探していたところ、手頃な薄型のフラットベットスキャ [続きを読む]
-
BootstrapStudioの使い方の感想を書いてみました
ドラッグアンドドロップでちょっとしたペラモノのサイトができる、BootstrapStudioが便利なのでレビューしてみま [続きを読む]
-
ロリポップのスタンダードプラン・アップデートの使用感
ロリポップサーバーのスタンダードプランで、アップデートの通知が来ていたので実際の制作案件でも使用してみることにしました。 [続きを読む]
-
WordPressの[…]を【続きを読む】に表示・抜粋文字数を変更する方法
PHPのバージョンを上げたら、投稿の抜粋を表示するPHPタグで下記のようなエラーが出ました。 Warning: Unde [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/xkindle-banner.webp.pagespeed.ic.3xyYKoNhYY.webp)