固定フッターエリアのカスタマイズも大詰めを迎えました。
今回は固定フッターエリアの基本的なデザインを変更します。固定フッターエリアの占有率が減って圧迫感が減ります。そういった機能的な要素は少しだけで、主な目的は見た目です。
デザイン変更したサンプル画像
カスタマイズすると以下のような固定フッターエリアになります。
当サイトでは固定フッターエリアに【Home】【シェア】【メニュー】の3項目を設定しています。TOPへ戻るボタンはデフォルトで右側に設定されています。
THE THOR 固定フッターエリア デザイン変更
デザインの変更は追加CSSで行います。
外観 → カスタマイズ → 追加CSS
※カスタマイズは自己責任でお願いします。
デザインの変更内容
- 背景をなし
- 各項目を丸ボタンに変更
- ボタンに枠付け
- ボタンのカラーを変更
- ボタンを等間隔で配置
追加するCSSは以下からコピペで使用可能
カラーやサイズ、ボタンの配置位置などは変更できます。
ここでは記載がありませんが各ボタン毎に色を変えることも可能です。
/*固定フッターエリア*/
/*固定フッターエリアアイコンカラー*/
.controllerFooter__item{
color :#ffffff;
}
/*固定フッターエリア*/
/*グラデ化のあとに透明*/
.controllerFooter{
background-color: rgba(255,255,255,0);
}
/*固定フッターエリア*/
/*等間隔配置*/
.controllerFooter__list {
justify-content: space-around;
margin: 0px 20px 20px 20px;
}
.controllerFooter__item {
width: 49px;
border-radius: 24.5px;
box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
background-color: rgba(175,26,26,1);
}
.controllerFooter__item:last-child {
color: #fff;
background-color: #191919;
}
/*固定フッターエリア背景を消すと出てくるトップに戻るボタンをスマホのみ消去する*/
@media screen and (max-width : 767px){
.bottomFooter__topBtn{
opacity:0;}
}
以上です。
あとがき
Homeボタンについて別記事を書いているのでそちらも参考にしてください。
固定フッターエリア
THE THOR の固定フッターエリアはとても便利な機能です。 スマホを利用中は画面下部にボタンがあることで片手操作が可能。設定を活用して使い勝手を良くしたいですね。 THE THOR 固定フッターエリア 設定 […]
スクロール中は表示を消すなども考えましたが「誰得？」となり常時表示です。むしろ「シェア」を常時表示でアピールしたい。シェアお願いしますm(_ _)m
