TCDテーマGLUE他：「フッターバー（モバイル端末専用）」の背景色・文字色・サイズ変更方法

Q.「フッターバー（モバイル端末専用）」の背景色やアイコン色を変更したいです。

「フッターバー（モバイル端末専用）」の背景色・文字色/サイズ・アイコン色/サイズ・高さを変更する方法をご紹介します。

▼変更後のイメージ

TCD LABO

背景色を設定できる「アイコンなし」のデザインもおすすめです。
→GLUEの「スマホフッターバー」のマニュアル

A.下記の方法で対応してください。

1.「ライトカラー」を設定する

TCDテーマ > フッター > フッターバー（モバイル端末専用）で「ライトカラー」を選択してください。

2. カスタムCSSに調整用CSSを入力する

TCDテーマ > 基本設定の「カスタムCSS」に以下を入力します。調整不要な行は削除しても構いません。

.p-footer-bar--type3 {
 color: #fff; /* 文字色 */
 font-size: 15px; /* 文字サイズ */
 background: #00698c; /* 背景色 */
 font-weight: 800; /* 文字・アイコンの太さ */
}
.p-footer-bar .icon_type_google {
 font-size: 27px; /* アイコンサイズ */
}
.p-footer-bar {
 height: 80px; /* フッターバーの高さ */
}
.p-footer-bar__item-link {
 justify-content: center;
 height: 80px; /* フッターバーの高さ */
}

 
補足）
・文字やアイコンを大きくする場合、ボタンは最大でも3つまでがよさそうです。
・高さによってはコンテンツ部分が狭くなり、操作しづらくなります。バランスをみて調整してください。