Simplicity2スマホ・スライドインのカスタマイズ！TOPに戻るボタンを画像に変更など…

Simplicity2のスマホで記事下や上にあるスライドインの検索・トップに戻る・サイドバーボタンを変更するカスタマイズ方法です。

PCビューでTOPに戻るボタンを画像にしているので、スライドインにしてもPC・スマホビューで同じような画像を使っても良いかも！と思ってCSSでカスタマイズしました。

サイドバーに人気記事を入れていると、サイドバーの文字列より人気記事に変更しても分かりやすいかと思いCSSで書き換える方法を紹介します。

検索ボタンの代わりに、例えば固定ページのリンクに変更したいけど、どうすれば良いか…などもチェックしてみてくださいね。

 Simplicity2でスライドインに変更したいとき

スライドインに変更したい場合、カスタマイザーから設定が必要です。完全レスポンシブ表示を有効に設定している場合、スライドインの項目は表示されないので、『完全レスポンシブ表示を無効』にしてから設定します。

WordPress管理画面の外観ーカスタマイズと選択後。

• チェックが付いている場合
  • チェックを外して、公開、③の<をクリック。
• チェックが外れている場合
  • ③の<をクリック。

スライドインのボタン下でも上でもダーク・ライトどれでも好みのものでOK❦

カスタマイザーのレイアウト（モバイル）でスライドインが表示されない場合

上記見出しの通りに行い、ブラウザをリロードさせてください。

1. 完全レスポンシブ表示を有効のチェックを外す
2. 公開・保存をクリックして反映させる
3. ブラウザのリロード、またはF5ボタンでリロード
   • 完全レスポンシブの無効が反映！
   • スライドインが表示される

スライドインのカスタマイズ：CSS編

スライドインのスタイルを変更する時、CSSを書く場所

スライドインは完全レスポンシブOFFで、スマホビューのみで表示するので、Simplicity2 child: mobile.cssにスタイルを記入してください。

さいごに反映しないときは、ブラウザのキャッシュを削除してください。※キャッシュ系プラグイン・サーバー側のキャッシュなど入れてるなら、そのキャッシュもクリアにすれば反映されます。

スライドインのトップに戻るボタンをCSSで画像に変更

/* トップの文字を消す */
.menu-caption-top::before {
	content: none;
}
/* ↑を透明に */
.menu-icon .fa-arrow-up:before {
	color: #fff0;
}
/* 画像の指定 */
#footer-button-go-to-top {
	background: url(画像のパス/top-button.png) no-repeat;
	background-size: contain;
	background-position: 50%;
}

※11行目画像のパスを入れないと表示されません。

画像のパスの確認方法は、以下リンク先：目次1.1.2.1『画像のURLをコピーする』からどうぞ❦

LINKWordPress初心者に画像追加時のメディアを説明！画像サイズ変更・画像のURLはどこ！？キャプション・代替テキストは超大事だからチェックねっ

スライドインのトップに戻るボタンに入れる画像の比率について

トップに戻るボタンを画像に変更する際、スライドインの高さ45pxなので一番小さい320pxにのデバイス幅に収まる画像を準備すると横幅は大体以下の通り。

トップページの場合、前後ボタンが無いので、横幅は多少広いです。

前へ（次へ）ボタンが1つ入るとき、横幅は64pxに。

前へ・次へボタンが全てそろうと、横幅が小さいスマホでは53pxになります。

横幅60px、縦45px位の比率で、スマホ用戻るボタン画像を作成しても良いかもしれません。

この画像で横133 × 縦58で作成すると、横幅320pxのスマホでみると以下のように画像が小さくなります。

スライドイン領域すべての、背景色を変更するCSS

スライドインの背景をbodyの背景と同じ色に変更したい場合、外観ーカスタマイズー色ー背景色（例えば#fff2fcの場合）色を合わせて以下のように指定するなど。

/* スライドインの背景色の変更 */
#footer-mobile-buttons {
	background-color: #fff2fc;
}

いやイヤ…画像に変更したいよ！って事なら、次をチェック！

領域すべての背景を、背景画像に変更するCSS

背景色を画像にしているとき、同じ画像を使うことで自分のサイト感が増すように思います。背景画像と同じに画像を指定しても良さそう❦

/* スライドインの背景色の変更 */
#footer-mobile-buttons {
	background: url(背景画像のパス/hoge.png) repeat;
}

※3行目画像のパスを入れないと表示されません。

スライドイン各項目、hover時の背景色を変更するCSS

どこまで必要か不明ですが、一応スマホのスライドインに指を置いたときの背景色を指定したい場合❦

/* ホバー時の背景色を任意の色に変更 */
#footer-mobile-buttons a:hover {
	background-color: #ffdce6;
}

スライドイン、サイドバーのスタイル・文字変更

• サイドバーの文字を別の文字列に変更（例：人気記事など）
• fontの色の変更をしたい

この場合、サイドバーの文字・アイコンフォントは別の指定なので、それぞれ変更します。

/* サイドバーの文字・色・太さ変更 */
.menu-caption-sidebar::before {
	content: '人気記事';
	color: #f00;
	font-weight: bold;
}
/* サイドバー上のアイコンフォントの色変更 */
#footer-mobile-buttons a .menu-icon .fa-outdent {
	color: #f00;
}

サイドバーに入れているウィジェットの名前に変更する（例：人気記事）などしても分かりやすいかも知れませんよね❦

スライドインPHPカスタマイズ、どのファイルのどこを編集するか

スライドインの中身を変更したい場合、どのPHPファイルを編集すれば良いかは、親テーマSimplicity2にある以下ファイル。

• buttons-footer-mobile.php

パス：該当ブログ.com/（public_html/）wp-content/themes/simplicity2/buttons-footer-mobile.php

コレをUTF-8Nで保存できるテキストエディタ：WindowsならTeraPadを使って編集してください。編集後に上書き保存して、子テーマフォルダ内にアップロードすればOK！

パス：該当ブログ.com/（public_html/）wp-content/themes/simplicity-childフォルダ内にbuttons-footer-mobile.phpをアップロード！

※PHPファイルの書き損じなどでエラーが出たら、子テーマ内にあるbuttons-footer-mobileファイルのみ削除すれば、復活します。

スライドインの『検索』を固定ページのリンクに変更

buttons-footer-mobile.phpの18行目のリンク#が『検索』なので、強引に変更。

<?php
///////////////////////////////////////////
// フッターモバイルボタンメニュー
///////////////////////////////////////////
if ( is_mobile_menu_type_slide_in() ): ?>
<div id="mobile-search-box">
  <?php get_template_part('searchform'); ?>
</div>
<div id="footer-mobile-buttons">
  <a id="footer-button-menu" href="#navi">
    <div class="menu-icon"><span class="fa fa-bars"></span></div>
    <div class="menu-caption menu-caption-menu"></div>
  </a>
  <a id="footer-button-home" href="<?php echo site_url() ?>">
    <div class="menu-icon"><span class="fa fa-home"></span></div>
    <div class="menu-caption menu-caption-home"></div>
  </a>
  <a id="footer-button-search" href="#">
    <div class="menu-icon"><span class="fa fa-search"></span></div>
    <div class="menu-caption menu-caption-search"></div>
  </a>

• 7行目の検索用PHPファイルは読み込まなくていいので、コメントアウト。

<?php //get_template_part('searchform'); ?>

• 18行目のhref="#"に該当リンク先を指定すれば該当ページのリンクに変更。

<a href="https://bibabosi-rizumu.com/cat-summary/" target="_blank"></a>ピンク部分をコピペ。※ target="_blank"は別ウィンドーで開く場合。

同じウィンドーで開くなら、<a href="ここにアドレス"></a>

検索用のスクリプトをコメントアウトか削除する

HTMLだけ変更してもスクリプトで指定があるので、該当ページへ移動できない為コメントアウトするか、該当スクリプトテンプレートファイルの63～79行目//モバイルの検索フォーム動作と//検索リンククリック動作をキャンセルの項目。

    //モバイルの検索フォーム動作
    $('#footer-button-search').click(function(){
      if ($('#mobile-search-box').css('display') == 'none'){
        $('#mobile-search-box').fadeIn('normal');
        $('#footer-button-search .menu-icon span').
          removeClass('fa-search').addClass('fa-times');
      } else {
        $('#mobile-search-box').fadeOut('normal');
        $('#footer-button-search .menu-icon span').
          removeClass('fa-times').addClass('fa-search');
      }
    });

    //検索リンククリック動作をキャンセル
    $('a#footer-button-menu, a#footer-button-search, a#footer-button-go-to-top, a#footer-button-sidebar').on('click', function(e){
        e.preventDefault()
    });

上記を全削除。または以下のようにコメントアウトしてください。

    //モバイルの検索フォーム動作
//    $('#footer-button-search').click(function(){
//      if ($('#mobile-search-box').css('display') == 'none'){
//        $('#mobile-search-box').fadeIn('normal');
//        $('#footer-button-search .menu-icon span').
//          removeClass('fa-search').addClass('fa-times');
//      } else {
//        $('#mobile-search-box').fadeOut('normal');
//        $('#footer-button-search .menu-icon span').
//          removeClass('fa-times').addClass('fa-search');
//      }
//    });

    //検索リンククリック動作をキャンセル
//    $('a#footer-button-menu, a#footer-button-search, a#footer-button-go-to-top, a#footer-button-sidebar').on('click', function(e){
//        e.preventDefault()
//    });

コレでTeraPadなどで文字コードの変更をしないように上書き保存。それから子テーマにアップロードすれば、該当リンク先に移動できるようになります。

CSSで検索のスタイル変更

mobile.cssで検索のアイコンや文字列を変更してます。

• リンク移動 などを指定f08e

/* 検索のアイコンと文字列を変更 */
.menu-icon .fa-search:before {
	content: "\f08e"
}
.menu-caption-search::before{
	content: 'cat一覧';
}

5行目の文字列は320pxのスマホサイズに合わせて全角で4文字までがベストかもしれません。

※アイコンフォントの指定方法については、以下リンク先目次：2章『アイコンフォントをCSSで指定しブログに表示』でご確認ください。

LINKFont Awesomeアイコンフォントを導入

これでページ内検索を停止してカテゴリ一覧ページなど、任意の固定ページにリンクのセットOK！オススメページを厳選してリンクを置いてください。

さいごに

全てのカスタマイズは必要ないかも知れませんが、必要なカスタマイズをチェックして、サイトで導入して試してみてくださいね。

それではかうたっくでした❦