WP Rocket - WordPress Caching Plugin

wordpress予約システムプラグインamelia完了画面に表示されるトロフィーアイコン変更方法を解説!

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問!

●チャットで質問し放題!

●24時間学び放題のEラーニング教材!

全部ついて 2,500円/月!

wordpress予約システムプラグインamelia(amelia公式サイトへリンクしています)の予約完了画面に表示されるトロフィーアイコンの変更方法を解説をしています。

cssを使うので少し高度な設定となります!



予約完了時のトロフィーアイコン

このトロフィーアイコンになります。

テキストを変えたい方は翻訳方法をご覧ください。

wordpress予約管理システム完了画面アイコン変更方法

cssを使ってカスタマイズ

cssでトロフィーを非表示

#am-add-to-calendar .am-svg-wrapper svg{
	display: none;
}

非表示にした後にご自身の画像を設定
サイズは高さ140pxくらいがちょうどよいと思いました。設定する画像サイズに合わせて高さ調整可能です。

#am-add-to-calendar .am-svg-wrapper{
	background-image: url("画像ファイルのパスを入力してください");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 140px;
}

すべてまとめると

#am-add-to-calendar .am-svg-wrapper svg{
	display: none;
}
#am-add-to-calendar .am-svg-wrapper{
	background-image: url("画像ファイルのパスを入力してください");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 140px;
}

これを、【外観】>【カスタマイズ】

wordpress予約管理システム完了画面アイコン変更方法

【追加CSS】へ入力します。

wordpress予約管理システム完了画面アイコン変更方法

子テーマを作成している方は、子テーマのstyle.cssに追加しても大丈夫です。

変更後

このようにアイコンを変える事が出来ました!

wordpress予約管理システム完了画面アイコン変更方法

以上でアイコンを変える事が出来ました。他のカスタマイズ解説リクエストがございましたらお気軽にメッセージをお送りください!

HanamiWEB

この記事を書いた人

松浦 みさ

株式会社HanamiWEB / Web制作・SEO・AI検索対策サポート

東京都練馬区を中心に、中小企業向けのホームページ制作、SEO対策、AI検索時代を見据えたサイト設計をサポートしています。
WordPressを活用した実務ベースの改善提案や、集客導線を意識したコンテンツ設計が得意です。
サイト保守運用も代行しております。

最短翌朝公開!土日祝も対応します!

超お急ぎホームページ制作プラン

超お急ぎでホームページを必要としている方向けの、ホームページ超お急ぎ制作プラン行っております!

最短翌朝公開、土日祝も対応します!お困りの方は是非、以下のバナーより詳細をご確認ください!

新着記事

練馬区 ホームページ制作で2位|AIに引用されるサイトの作り方を解説
ホームページ更新代行とは?費用・相場・依頼方法をわかりやすく解説
RankMathの「ウェブマスターツール」設定ガイド|Google Search Console・Bing
RankMath「パンくずリスト」設定ガイド
ja日本語