採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

スマホ表示の際のサイドバーボタンを非表示にする

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; }

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事