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もそれに応じて大きくしなければ、下にはみ出てしまいます。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!