Xeoryのスマホトグルメニューをデフォルトで閉じる方法(3分)

 

ブロガーの皆さん、こんにちは。相原 有希です。

今回の記事では、Wordpessテーマ「Xeory」のスマホ用トグルメニューを、デフォルトで非表示にする方法を紹介します。

HTML・CSS初心者でも2〜3分で完了するので、記事を読みながら挑戦してみてください!

 

Xeoryのスマホトグルメニューは、デフォルトでは常時表示になってしまう ……

バズ部の「Xeory Base」は非常にシンプルで軽量なWordpressテーマなので気に入っているのですが、スマホ版の表示で一箇所だけ気に入らない部分が ……。

それがトグルメニュー(グローバルメニュー)。

画像を見てもらえればわかりますが、何の設定もしていないデフォルトの状態だと、メニューが全項目だらーっと垂れ下がった状態になっているんです。

このままでも良さそうですが、スマホユーザーがパッと見たときのファーストビューが全てメニューに埋め尽くされてしまう。

ユーザビリティが下がる気がするし、何よりデザイン的にイケていないので嫌でした。

そこで、今回は「Xeory」テーマのコードをほんの少しだけいじって、スマホトグルメニューがデフォルトでは非表示(閉じている状態)になるようにカスタマイズしてみようと思います。

とは言え、2〜3分で終わるぐらいの単純な作業なので、HTML・CSS初心者でもご安心を。

 

Xeoryのスマホトグルメニューを、デフォルトで閉じておく方法

それでは、早速「Xeory」のコードを編集していきます。以下の3つのステップを踏めば簡単に修正できるので、一つずつ見ていきましょう。

1親テーマ → 子テーマに footer.php をコピー

WordPressのテーマをいじるときには、親テーマのオリジナルファイルではなく、必ず子テーマに複製したコピーファイルを編集するようにしましょう。

親テーマにあるファイルをそのまま編集すると、万が一ファイルが破損した場合、Wordpressにアクセスできなくなる可能性もあります。バックアップは必ず取っておいてくださいね。

 

2子テーマ側の footer.php を開き、「//スマホトグルメニュー」に関する記述をさがす

親テーマの中にある「footer.php」というファイルを子テーマに複製してから、編集画面を開きます。

footer.phpは、63行ぐらいのコードから構成されるファイルです。

コードの編集は、Wordpressの管理画面 → 外観 → テーマの編集 → footer.php でも良いですし、Filezilla等のFTPソフトを使用しても大丈夫。

そのまま下にスクロールしていくと、トグルメニューに関する記述が見つかるはず。

次のステップでは、この部分のコードを編集(差し替え)します。

ちなみに、Ctrl+F あるいは ⌘+F で「//スマホトグル」と検索しても大丈夫です。

 

3コードを差し替える

// スマホトグルメニュー という表記の下にある、

<?php if( is_front_page() ){ ?>
$(’#gnav’).addClass(’active’);
<?php }else{ ?>
$(’#gnav’).removeClass(’active’);
<?php } ?>

という6行のコードを ……

$(’#gnav’).removeClass(’active’);

これに置き換えるだけ。たったこれだけで編集完了です! ファイルを上書き保存をして、footer.php を閉じます。

 

Xeoryのスマホトグルメニューをデフォルトで非表示にすることができました

無事、トグルメニューをデフォルト非表示にすることができました。

ファーストビューで記事の情報が目に入ってくるようにあったので、ユーザビリティも以前より向上しそうですね。

もちろん、右上のハンバーガーメニュー をタップすれば、いつでもトグルメニューを呼び出すことができます。

……ちなみに僕はスマホでサイトを見るときにはグローバルメニューはほとんど使わないんですけどね。

ご精読ありがとうございました。

 

現在お使いのWordpressブログテーマに不満はありませんか?

ほんとうに使いやすいブログテーマが見つかれば、生産性もケタ違いに上がりますしモチベーションも高まります!

これまでに無料・有料あわせて15種類以上のWordpressテーマを使用してきたぼくが、「これは!」と本気で惚れ込んだ3つのテーマを厳選しました。

「今よりもブログを楽しみたい!」という方は、以下のボタンからレビュー記事へどうぞ!

シェアしてね!

 

【初心者用】ブログで月に1万円稼ぐ方法を徹底紹介!

ブログ運営歴2年の筆者が、ブログ収益「月1万円」のラインを達成するまでに行った全てのことを公開。

実際のスクショ画面をふんだんに盛り込んだ生々しい情報と共に、圧倒的なボリュームで語り尽くしています。

冒頭部分は無料ですので、まずは試し読みしてみて、続きが気になった方のみ購読をお願いします!

note.muにてワンコインで有料公開中!

 




この記事を読んだ人は、こんな記事も読んでいます