swell スマホ用　フッターボタンをカスタマイズする方法

swellでスマホユーザーにとって最適なスマホ用フッターバナーの作成方法とカスタマイズ方法を、わかりやすく解説します!!

フッター用バナーを作成

まず、メール申し込みとお電話申し込みなどそれぞれに、お客様の心を掴むフッターを作成しましょう！

• サイズ: 684✖️240 (ピクセル) くらいで作成
• バナー作成ツールは、下記などを使うといいでしょう。
  

Canva
Photoshop
GIMP

今回は、サンプルで下記のようなフッターバナーを作成しました。

フッターバナーをブログパーツに登録

作成したバナーを、ブログパーツに変換してスマホ画面に最適化しましょう！
ブログパーツをクリック

新規追加をクリック>それぞれ登録する。

1. ブログパーツで画像を登録
   • アスペクト比は「カスタム」を選択
   • 幅：171px
   • 高さ：60px
   • 伸縮：coverを選択
   • 解像度：フルサイズを選択
   • 更新をクリック
   • 呼び出しコードをコピー
2. WordPressでブログパーツ挿入
   • 外観 > メニュー > 固定フッター(sp) を選択
   • カスタムリンクを追加
   • ナビゲーションラベルにコピーした呼び出しコードを貼り付け

追加CSSにコードを追加

外観>カスタマイズ＞追加CSSをクリックして下記のコードを追加してみてください。
あとは自分の好きなサイズ感に調整しましょう。

/* スマートフォンビューポート用のメディアクエリ */
@media (max-width: 767px) {
  /* フッターメニュー全体のスタイルを調整 */
  #fix_bottom_menu .menu_list {
    padding: 0px 0; /* 上下のパディングを追加 */
  }

  /* メニューアイテムのスタイルを調整 */
  #fix_bottom_menu .menu_item {
    margin: 5px 0; /* 上下のマージンを追加 */
  }

  /* メニューアイテム内の画像のスタイルを調整 */
  #fix_bottom_menu .menu_item img {
    max-height: none; /* 高さの制限を解除 */
    width: auto; /* 幅を自動調整に設定 */
    max-width: 100%; /* 最大幅を親要素に合わせる */
  }
}




/* スマートフォンビューポート用のメディアクエリ */
@media (max-width: 767px) {
  #fix_bottom_menu {
    height: 80px; /* ここに変更したい高さを指定します */
    /* さらにパディングやマージンを調整する必要がある場合はここで指定 */
    padding: 0px 0; /* 例：上下に10pxのパディングを追加 */
  }
}

外観設定の変更

外観＞カスタマイズ＞サイト全体設定＞下部固定ボタンメニュー＞特殊メニューボタンの表示設定のチェックを全て外す。