Q.スマホ表示の際のメニュー、サイドバーボタンの大きさを変更したい
A.下記のcssファイルの該当箇所を編集します
編集するファイル:footer_btns.css
編集する箇所:
■Menuの大きさの変更
.mobi_global .btn {
position: fixed;
color:#000;
display: block;
left: 0px;
bottom: 0px;
padding: 5px 0 0;
z-index: 9999;
background-color: #fff;
opacity: 0.9;
cursor: pointer;
height: 35px;
width: 40px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobi_global .btn span{
display: block;
font-size: 1.4em;
}
↓
.mobi_global .btn {
position: fixed;
color:#000;
display: block;
left: 0px;
bottom: 0px;
padding: 5px 0 0;
z-index: 9999;
background-color: #fff;
opacity: 0.9;
cursor: pointer;
height: ●●px;
width: ●●px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobi_global .btn span{
display: block;
font-size: ●●em;
}
■Sidebarの大きさの変更
.mobi_sidebar .btn {
position: fixed;
color:#000;
display: block;
right: 0px;
bottom: 0px;
padding: 5px 0 0;
z-index: 9999;
background-color: #fff;
opacity: 0.9;
cursor: pointer;
height: 35px;
width: 40px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobi_sidebar .btn span{
display: block;
font-size: 1.4em;
}
↓
.mobi_sidebar .btn {
position: fixed;
color:#000;
display: block;
right: 0px;
bottom: 0px;
padding: 5px 0 0;
z-index: 9999;
background-color: #fff;
opacity: 0.9;
cursor: pointer;
height: ●●px;
width: ●●px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobi_sidebar .btn span{
display: block;
font-size: ●●em;
}
※●●はご任意の数値を記述して下さい。
※font-sizeを大きくすると、height・widthもそれに応じて大きくしなければ、下にはみ出てしまいます。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!