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

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

子テーマもしくは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をコピーして貼り付けます。

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

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

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

この記事を書いた人

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

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

Font Awesomeアイコンの登録方法と使い方
Webページにアイコンを表示できる「Font Awesome」デザイン制作によく使われるようになったアイコンですが、アカ [続きを読む]
WEBデザイナーが印刷物制作・入稿に注意すること
WEBデザインの業務と印刷物のグラフィックデザインの仕事を同時進行で制作していると、うっかりミスが出やすいので自戒を込め [続きを読む]
HTMLとWordPressでWEBサイトを作るならどっちが良い？
今どきなぜ手書きのHTML・CSSでホームページを作るのか？現在はホームページを作るための専用のタグを覚えなくても、簡 [続きを読む]
ウェブデザイン技能検定２級をこれから受験する人へ【対策方法】
ウェブ業界の中で、唯一の国家資格「ウェブデザイン技能検定」ですが、知名度がイマイチ高くないのかまだまだ認知されていないよ [続きを読む]