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を書き換えることで、
- ボタンの大きさ
- ボタンのボーダー
- ボタンの背景色
- ボタンの丸み
- ボタンの中の画像
などを自由にカスタマイズすることが可能です!
ぜひ、あなたのサイトに合わせたカスタマイズをしてみてください。
投稿者プロフィール
-
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。
最新の投稿
- WordPress講座2024年7月4日画像にPDFのリンクを設定!|WordPress【プラグイン不要】|画像をクリックするとPDFが開くようにするには?
- WordPressのプラグイン2024年6月26日VK Filter Search Proの使い方 ー 応用編 ー|WordPressの検索システムのプラグイン
- WordPressのプラグイン2024年5月27日VK Filter Search Proの使い方 ー 基礎編 ー|WordPressの検索システムのプラグイン
- WordPressのプラグイン2024年4月16日Booking Packageの使い方|2024年最新 | 時間帯予約&宿泊予約に対応
お問合せフォームはこちら
弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。