SWELLのトップへ戻るボタンを画像に変更する方法

ページトップへ戻るボタンのカスタマイズ

WordPressテーマの「SWELL」のページ下、「ページトップへ戻るボタン」を画像に変更する方法を記載します。
テーマ内では変更する機能が付いていないので、CSS側を直接触って元のアイコンを非表示にした後、画像を追加して表示させます。

ページトップへ戻るボタン

子テーマもしくはstyle.cssにタグを追加する

swell_childの子テーマ内のstyle.cssに以下のタグを追加するか、ややこしければWordPress管理画面の「外観」→「カスタマイズ」→「追加 CSS」の中に以下をコピペして追加してください。

  1. /* トップへ戻るボタン
  2. ----------------------------------*/
  3. .c-fixBtn {
  4.     align-items: center;
  5.     background: initial;
  6.     border: initial;
  7.     border-radius: initial !important;
  8.     box-shadow: initial;
  9.     color: initial;
  10.     cursor: initial;
  11.     display: flex;
  12.     flex-direction: column;
  13.     height: 80px; /* 画像サイズごとに数字を変える */
  14.     justify-content: center;
  15.     letter-spacing: normal;
  16.     line-height: 1;
  17.     opacity: .75;
  18.     overflow: hidden;
  19.     text-align: center;
  20.     transition: all .25s;
  21.     width: 80px; /* 画像サイズごとに数字を変える */
  22.     background: url(' ここにアップロードした画像のURLを貼り付ける ');
  23. }
  24. .icon-chevron-small-up:before, .icon-chevron-up:before {
  25.     content: initial;
  26. }
  27. .hov-bg-main:hover {
  28.     background-color: initial !important;
  29.     color: initial !important;
  30. }

元々付いているタグはそのまま使用しています。

「initial;」や「!important;」の記述が多いのは、元のボタンを消すためのタグです。

※22行目の「ここにアップロードした画像のURLを貼り付ける」のところは、あらかじめ「メディア」から画像をアップしておき、画像のURLをコピーして貼り付けます。

アイコン画像をアップロードする

保存して公開すると、ボタンが非表示になって画像に変更されているのを確認できれば完了です。

少しの手間でデザインが変えられるので、細かいパーツもカスタマイズしたい人へオススメです。

[公開日] 2024年3月1日 / [最終更新日] 2024年3月14日 / カテゴリー:WEBデザイン


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBクリエイター・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookXInstagram

同じカテゴリーの記事