WordPressテーマTCDのカスタマイズを研究するサイト

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

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; }
The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。