お世話になります。
LPを作る際に「フローティングボタン」がXwriteで実装する方法が思い浮かびません。
ウィジェットなどで設定できるWordPressテーマもあるようですが、Xwriteでの実装方法を知りたいです。
※もしXwrite単体では実現が難しい場合はカスタムHTMLや追加CSSでの実現方法、安心？推奨できるプラグインなどをお知らせいただけると嬉しいです。
本件、chatGPTを使って解決しました。
以下に貼り付けるので、Xwriteでフローティングボタンの実装方法に悩む方の参考になれば幸いです。
---
▼ウィジェットのフッターエリアにカスタムHTMLで追加する内容
---
<div class="floating-2col-wrapper">
<a href="○○リンク先○○" class="floating-item item-line" target="_blank" rel="noopener">
<div class="item-header">簡単 LINE 予約</div>
<div class="item-body">
ご予約はコチラ
<span class="yellow-line"></span>
</div>
</a>
<a href="tel:○○電話番号○○" class="floating-item item-tel">
<div class="item-header">今すぐお電話で予約</div>
<div class="item-body">
<span class="tel-num">○○電話番号○○</span>
<span class="sub-text">平日 9時から17時</span>
</div>
</a>
</div>
---
▼追加CSS
---
/* --- ベースの配置設定（2カラム用） --- */
.floating-2col-wrapper {
position: fixed;
bottom: 10px; /* 画面下からの距離 */
left: 50%;
transform: translateX(-50%);
width: 96%; /* 画面幅いっぱいになりすぎない余白 */
max-width: 600px; /* PCで見やすくするための最大幅 */
z-index: 9999;
display: flex; /* 横並びにする魔法の記述 */
justify-content: space-between; /* 2つのボタンを均等に配置 */
gap: 10px; /* ボタン同士の隙間 */
}
/* --- ボタン共通のデザイン --- */
.floating-item {
flex: 1; /* 2つのボタンを同じ幅に設定 */
text-decoration: none;
border-radius: 10px; /* 角の丸み */
padding: 8px 5px; /* 内側の余白 */
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: opacity 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
}
.floating-item:hover {
opacity: 0.9;
}
/* --- 色の設定：LINE（緑系） --- */
.item-line {
/* 明るい黄緑から緑へのグラデーション */
background: linear-gradient(135deg, #66ff66 0%, #00cc00 100%);
}
/* --- 色の設定：電話（青系） --- */
.item-tel {
/* 明るい水色から青へのグラデーション */
background: linear-gradient(135deg, #33ccff 0%, #0099ff 100%);
}
/* --- ボタン内部：白いヘッダー部分 --- */
.item-header {
background: #fff;
color: #333;
font-size: 10px;
font-weight: bold;
border-radius: 20px;
margin-bottom: 4px;
padding: 2px 0;
width: 90%;
margin-left: auto;
margin-right: auto;
}
/* --- ボタン内部：メインテキスト部分 --- */
.item-body {
color: #fff;
font-weight: bold;
font-size: 13px;
line-height: 1.3;
position: relative;
}
/* --- 装飾：LINE側の下線（黄色） --- */
.yellow-line {
display: block;
width: 80%;
height: 3px;
background-color: #ffff00;
margin: 2px auto 0;
border-radius: 2px;
}
/* --- 装飾：電話番号の強調 --- */
.tel-num {
display: block;
font-size: 16px; /* 番号を大きく */
letter-spacing: 0.5px;
}
.sub-text {
display: block;
font-size: 9px;
opacity: 0.9;
transform: scale(0.9); /* 文字を少し小さく詰める */
}
/* --- モバイル調整 --- */
@media (max-width: 370px) {
.item-body { font-size: 11px; }
.tel-num { font-size: 14px; }
@mail_info さま
ご質問いただきましてありがとうございます。
自己解決いただけた上で、共有いただきましてありがとうございます😊
過去に他のユーザーさまからもモバイルのフッターメニューの
リクエストをいただいていますので
あわせてテーマ設定やウィジェットエリアの追加で
機能調整が出来ないか検討させていただきます。