Q.スマホのフッターメニュー「SIDEBAR」を非表示にしたい
スマホで表示しているときにフッターに表示されるメニューで「SIDEBAR」を非表示にする方法を教えてください。
A.下記のphpファイルの該当箇所を削除します
編集するファイル:mobile/footer.php
削除する箇所:
<div id="footer_menu_button"> <ol class="clearfix"> <li id="footer_menu_button1"><a href="#"><?php _e('MENU', 'tcd-w'); ?></a></li> <li id="footer_menu_button4"><a href="<?php echo esc_url(home_url('/')); ?>"><?php _e('HOME', 'tcd-w'); ?></a></li> <li id="footer_menu_button3"><a href="#" id="return_top"><?php _e('TOP', 'tcd-w'); ?></a></li> <li id="footer_menu_button2"><a href="#"><?php _e('SIDEBAR', 'tcd-w'); ?></a></li> </ol> </div>
↓
<div id="footer_menu_button"> <ol class="clearfix"> <li id="footer_menu_button1"><a href="#"><?php _e('MENU', 'tcd-w'); ?></a></li> <li id="footer_menu_button4"><a href="<?php echo esc_url(home_url('/')); ?>"><?php _e('HOME', 'tcd-w'); ?></a></li> <li id="footer_menu_button3"><a href="#" id="return_top"><?php _e('TOP', 'tcd-w'); ?></a></li> </ol> </div>
メニューボタンの位置の調整は下記ファイルの該当箇所をご編集ください。
編集箇所については言及しておりませんので、適宜調整ください。
編集するファイル:mobile>style-mobile.css
(ワードプレスの管理画面からは直接参照できないのでFTP等を使用し、編集する必要があります)
編集する箇所:
/* 固定ボタン */ #footer_menu_button { position:fixed; right:0px; bottom:0px; z-index:10; width:100%; background:rgba(255,255,255,0.9); border-top:1px solid #ccc; height:50px; box-shadow:0 0 5px 0 rgba(0,0,0,0.2); -webkit-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .open_left #footer_menu_button { right:85%; } .open_right #footer_menu_button { right:-85%; } #footer_menu_button li { float:left; width:25%; font-size:10px; } .open_left #footer_menu_button li#footer_menu_button2 { float:right; width:15%; } .open_right #footer_menu_button li { width:15%; } #footer_menu_button li a { display:block; text-align:center; padding-top:14px; height:36px; line-height:50px; color:#333; text-decoration:none; } #footer_menu_button li#footer_menu_button1 a { background:url(../img/footer/mobile_menu1.png) no-repeat center 9px; } #footer_menu_button li#footer_menu_button2 a { background:url(../img/footer/mobile_menu2.png) no-repeat center 9px; } #footer_menu_button li#footer_menu_button3 a { background:url(../img/footer/mobile_menu3.png) no-repeat center 9px; } #footer_menu_button li#footer_menu_button4 a { background:url(../img/footer/mobile_menu4.png) no-repeat center 8px; } #footer_menu_button li a:hover { background-color:#ddd !important; } .open_left #footer_menu_button li#footer_menu_button2 a { background:url(../img/footer/mobile_menu5.png) no-repeat center 9px; } .open_right #footer_menu_button li#footer_menu_button1 a { background:url(../img/footer/mobile_menu5.png) no-repeat center 9px; }
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!