THE THOR ザ・トール固定フッターエリアデザイン変更

2019-06-232021-07-06

当ページのリンクには広告が含まれています。

固定フッターエリアのカスタマイズも大詰めを迎えました。

今回は固定フッターエリアの基本的なデザインを変更します。固定フッターエリアの占有率が減って圧迫感が減ります。そういった機能的な要素は少しだけで、主な目的は見た目です。

デザイン変更したサンプル画像

カスタマイズすると以下のような固定フッターエリアになります。

当サイトでは固定フッターエリアに【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;}
}

以上です。

[wpap service=”with” type=”detail” id=”B07F5XVB7H” title=”ビデオクリップ: お絵かき Thor” search=”Thor”]