【クリエイターモード】テンプレート&moreで、スマホでもフッターに「お問い合わせ」を表示させることはできますか。 – makeshop よくある質問

スマホでは、メニュー内「Guide」下に「お問い合わせ」があるため、
フッター内のお問い合わせは意図的に非表示にするようにデザインされています。

CSSの変更で、スマホでもフッターに「お問い合わせ」を表示させることは可能です。

（１）ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」

CSS入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

.foot-contact-box

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

  .foot-contact-box,
  .foot-calendar {
    display: none;
  }

こちらから

.foot-contact-box,

を削除（お問い合わせとカレンダーをまとめて非表示に指定している記述のうち、お問い合わせに対するclassを削除）してください。

＜削除後＞

.foot-calendar {
    display: none;
}

（２）同じく
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
CSS入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

.footer-section h2

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

.footer-section h2 { 
  display: none; 
}

この記述を削除してください。

（３）上記の対応で「お知らせ」は表示されるようになります。レイアウトはCSSを編集し調整してください。

＜例＞
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
CSS入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

.footer-section

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。（2200行目より後方）

.footer-section { 
   margin: 0; 
   width: 100%; 
   padding: 0; 
}

この記述に

flex-wrap: wrap;

を追記してください。

＜追記後＞

.footer-section { 
   margin: 0; 
   width: 100%; 
   padding: 0; 
   flex-wrap: wrap; 
}

（４）（３）の後方の記述

.foot-guide {
   width: 100%;
   padding: 0;
}

のpaddingを変更して左右の余白を調整してください。

＜変更例＞

.foot-guide {
   width: 100%;
   padding: 0 20px;
}

（５）（４）のCSSの後ろに以下を追記し保存してください。

.foot-contact-box,
.footer-section h2::after { 
   width: 100%; 
}
.footer-section .support-text { 
   margin-top: 0; 
} 
.footer-section .support-text a{ 
   display: inline-block !important; 
}

関連記事