Lightningテーマについてくる
「ページトップへ戻るボタン」を、カスタマイズしてみたいと思ったことはありませんか?
初期状態はこのような形です。

追加CSSに記述をすることで、ボタンのデザインを変更することができます!
ここではその方法をお伝えしていきます。

パターン1:ボタンの中の画像はそのままで背景色などを変更する方法

ボタンの中の画像はそのままで、背景色などを変更する方法です。

外観>カスタマイズ>追加CSS
にCSSを記載をしていきます。

※イメージ図

/*上に戻るボタンカスタマイズ*/
.page_top_btn {

/*ボタンの大きさ*/
width: 60px;
height: 58px;

/*ボーダーの種類と色*/
border: solid #fff;

/*ボタンの背景色*/
background:#22b573;

/*ボタンの丸み*/
border-radius: 50%;

/*ボタンの中の画像(デフォルトのもの)*/
 background-image: var(--ver_page_top_button_url);

/*ボタンの中の画像サイズと位置など*/
background-size:50%;
background-repeat: no-repeat;
background-position: center;
/*シャドウ効果なし*/
 box-shadow: none;

}

パターン2:ボタンの中の画像と背景色などを変更する方法

次は、ボタンの中の画像を変更する方法です。
設置する元画像はこのように、背景が透明になっています。


外観>カスタマイズ>追加CSS
にCSSを記載をしていきます。

※完成イメージ図

/*上に戻るボタンカスタマイズ*/
.page_top_btn {

/*ボタンの大きさ*/
width: 60px;
height: 58px;

/*ボーダーの種類と色*/
border: solid #22b573;

/*ボタンの背景色*/
background:#d0f0bd;

/*ボタンの丸み*/
border-radius: 10px;

/*ボタンの中の画像(デフォルトのもの)*/
 background-image: url("画像のURL");

/*↑あらかじめメディアにアップロードした画像のURLをコピーしておき、画像のURLのところに貼り付けます*/

/*ボタンの中の画像サイズと位置など*/
background-size:90%;
background-repeat: no-repeat;
background-position: center;
/*シャドウ効果なし*/
 box-shadow: none;

}

CSSを書き換えることで、

  • ボタンの大きさ
  • ボタンのボーダー
  • ボタンの背景色
  • ボタンの丸み
  • ボタンの中の画像

などを自由にカスタマイズすることが可能です!
ぜひ、あなたのサイトに合わせたカスタマイズをしてみてください。

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)