ブログ

【WordPress初心者必見】スマホのスライドメニュー設定方法

2020-02-13

ワードプレススライドメニュー

 

皆のブログをスマホで読む時に出てくるスライドするメニュー、どうやって設定しているんだろう?

 

これはつい先日の僕です。今では設定が完了し、今後何を配置するか考え中です。

 

この記事では、スマホの画面でスライドメニューを設定する方法を画像付きで解説します。

 

この記事を読めば誰でもスライドメニューの設定が5分程度でできます

 

わやってもともとこんな人

  • PCはyoutubeを観るためのもの
  • スマホはゲームと電話をするもの

 

こんな僕でもすんなりと設定することができたので、必ず設定できます

 

普段ブログをPCで書いていて、スマホで確認することが少ないと気付かないんですよね…。

 

もし設定がまだの人がいれば、この機会にスマホからの読者様のためにも一緒に設定しましょう!

 

【WordPress初心者向け】スマホのスライドメニューの設定とは?

背景が青い歯車

 

WordPress初心者でも簡単に設定できるスライドメニューについて解説します。

 

百聞は一見に如かず、下の画像のようにメニューをクリックすると出てくるものです。

 

slidemenu

 

僕は現在カテゴリーを設定しています。

 

これがあればわざわざスクロールして探さなくても良いので、読者さんが読みたい記事やジャンルを探すのが楽になります。

 

WordPressならどのテーマでも設定できるのか?

 

WordPressのメニュー内にある『外観』→『メニュー』より設定できます。

 

ちなみに今回の解説ではAFFINGER5を利用していて、『AFFINGER5管理』という設定を操作します。

 

他のテーマでも基本の動作はほぼ同じですので、ぜひ参考にしてください!

 

スライドメニューは設定しないといけないのか?

 

必ずしも設定しなければいけないわけではありません。

 

ですが、設定してあると読者さんにとって周りやすいサイトになるので読んでいただける時間も伸びます

 

急ぎではありませんが、可能であれば早めに設定しましょう

 

スマホでブログを読む人もたくさんいますよね

 

スライドメニューの設定方法を画像付きで解説

歯車が3つ

 

スライドメニューを設定していきます。

 

メニューの作成はまずワードプレスの『外観』→『メニュー』からです。

 

それでは新しくメニューを作ります。

 

slidemenu

 

次にメニュー名ですが、分かりやすくスマホ用スライドメニューとしておきましょう。

 

その後、上段にある『位置の管理』をクリック。

 

slidemenu

スマートフォン用スライドメニュー欄を、先ほど作成した『スマホ用スライドメニュー』に設定します。

 

変更を保存も忘れずにです。

 

 

 

続いて先ほどの『メニューを編集』タブに戻り設定していきます。

 

slidemenu

 

左側にある『メニュー項目を追加』から、スライドメニューに表示したい物を選んで追加していきます。

 

僕はカテゴリーを表示したいので、全て選択しています。

 

ここで注意点は、『すべて選択』をクリックすると『未分類』のカテゴリー名まで追加されてしまうので選択から外します。

 

ただ、もし間違えていれてしまってもあとで削除することもできますので安心してください。

 

その後、どのような階層で表示したいかを設定します。

 

slidemenu

 

僕はこのような設定です。

 

画像のように、選択した枠組みの先頭が赤線上に表示されているのが親カテゴリー。

 

緑の線が先頭なのが子カテゴリーといって、親カテゴリーの中に表示されます。

 

ポイント

  • 大分類として親カテゴリー
  • その中で細かく分けた分類が子カテゴリー

 

必ずしも子カテゴリーで分ける必要はありませんが、書き続けていくとカテゴリー内に記事がたくさん溜まり探しにくくなります。

 

初めは気にせず書き進め、ある程度記事が増えてきてからでも問題ありません。

 

 

 

最後にしつこいようですが、必ず保存をしましょう。

 

これで設定が完了しました!

 

それでは実際にスマホでみてみましょう!

 

スライドメニュー設定後の確認

 

スマホでGoogle Chromeを開き自身のブログを開きます。

 

先ほどの設定通りであればこのように表示されます。

 

slidemenu

 

左上の三本線をクリックすると、スライドメニューが現れます。

 

slidemenu

 

きちんと表示されましたね!

 

これでスライドメニュー設定の確認も終了です。

 

AFFINGER5を利用していると…

 

こちらはAFFINGER5に興味がある人だけお読みください。

 

 

 

ワードプレスの有料テーマ【AFFINGER5】を利用しているとスライドメニューを簡単にデザインなどの変更ができます。

 

先ほどのスライドメニューを表示する三本線ですが、少し寂しいですよね。

 

AFFINGER5ならそのような設定も簡単にできます。

 

ちなみに僕のスライドメニューはこのようになっています。

 

slidemenu

 

先ほどとの違いは以下の3点です。

 

ポイント

  1. スライドメニューが右側にある
  2. 三本線のデザインを変更した
  3. デザインの下にMENUの文字を表示

 

この作業がAFFINGER5なら1分かからず設定できます。

 

手順は簡単、まずAFFINGER5の管理画面をクリック。

 

slidemenu

 

左側に表示される【メニュー】をクリックし、中段までスクロールします。

 

slidemenu

 

初期設定ではこのようになっています。

 

僕の設定では次のように変更します。

 

slidemenu

 

僕の中で優先度が高かったのは、メニューの位置です。

 

僕は左利きなので押しやすいですが、左側にあると右利きの人は押しづらいのではないかと考えました。

 

左利きの割合は日本だけでみても約1割と、圧倒的に右利きの割合が多いです。

 

少しでも多くの人に見てもらいやすいブログ作りをと考えているので、右側にしました。

 

ちなみに下層リンクを最初から開くというのは下の画像です。

 

slidemenu

 

先ほどとは違い、初めから子カテゴリーも開かれています。

 

どちらが見やすいかはカテゴリーの量や表示させたい内容によって変わりますので、日々アップグレードです。

 

AFFINGER5は痒いとこにも手が届きます

 

スライドメニューを設定したらそこで個性も出せるので絶対設定するべき:まとめ

まとめに使う画像

 

ポイント

  • スライドメニューはスマホの読者様に見せやすくするのでおすすめ
  • 設定自体はとても簡単

 

僕はPCで記事を書き、確認もPCのみで行なっていました。

 

ですが、ふとスマホでブログを読んでいたことに気付き、自分のブログはどんな風に見えているのか気になりました。

 

実際に開いてみると、お世辞にもスマホで読む環境は整っていませんでした。

 

これを機に少しずつスマホでの設定も変更していきます。

 

1人でもスマホで読んでくれる人が増えれば嬉しいと思います。

 

それでは、この記事が同じような悩みを抱えている人の参考になれば幸いです。

 

複数のブログを運営するメリットデメリット

ブログ

2020/10/21

ワードプレスで複数のブログを運営するメリット・デメリット【初心者必見】

  WordPressで複数のブログを運営するのってどうなの? メリットがあるなら複数のブログを運営したいんだけど教えて!   このような疑問を解消します。   結論からいうと、複数のブログを今から始めるのであればまずは1つのブログを育てましょう。 初心者がいきなりブログを複数運営するにはデメリットや負担が大きすぎます。   現在運営しているブログがうまくいっている人の中には複数のブログ運営をしてメリットがある人もいます。 本記事では複数ブログを運営するメリット・デ ...

ReadMore

ブログの書き方6ステップ

ブログ

2020/10/18

ブログの書き方6ステップ!テンプレ作成で時間短縮【初心者でもできる】

  ブログ1記事書くのにすごく時間がかかっちゃう。 みんなどうやってブログを早く書いているんだろう?   このような疑問にお答えします。   結論からいうと、ブログに慣れてきた所謂「脱初心者ブロガー」の方々はそれぞれブログを書くときの「テンプレ」ができています。   本記事の内容 ブログの書き方6ステップ ブログ1記事執筆時間の目安   本記事では僕が記事を書く時に意識しているテンプレを紹介します。   テンプレを作成することによってブログ1記事 ...

ReadMore

sellers.jsonの設定方法

ブログ

2020/9/10

【Googleアドセンス】sellers.jsonとは?【対応方法】

  Googleからよく分からないメールがきた!「sellers.json」って何?対応してって書いてあるけどなんか怖い…   このような悩みを解消します。   sellers.jsonは広告主にサイト情報などを公開し、透明化するためのツールのこと。   本記事の内容 sellers.jsonとは sellers.jsonへ登録する方法   本記事では、実際に情報を登録する手順を紹介しています。   長文が苦手でメールを読んでいない人には、本記事 ...

ReadMore

AFFINGER5でWordPressのアップデート

ブログ

2020/8/29

【AFFINGER5】WordPress5.5へのアップデート【タグ復活】

  AFFINGER5ユーザーはもうWordPressのアップデートしても大丈夫?   このような疑問を解消します。   結論、AFFINGER5はWordPress5.5での不具合が解消されたので、アップデートして大丈夫です。   本記事の内容 WordPressの操作時に注意すること AFFINGER5のアップデート方法 WordPressのアップデート方法   本記事では、WordPressのアップデート方法を簡単に解説します。   AFF ...

ReadMore

WordPressログインURLの変更方法

ブログ

2020/9/5

ワードプレスのログインURLを早急に変更するべきたった1つの理由

  WordPressのログインURLって変えた方がいいのかな? まずどうやって変えるんだろう?   このような疑問を解消します。   結論からいうと、今すぐにでも変更しましょう。 理由はそのままにしておくと悪意ある第三者に不正アクセスされてしまう危険性があるからです。   本記事の内容 ワードプレスのログインURLとは ログインURLの簡単な変更方法 ログインURL以外に対策しておくべきこと   本記事を読むと、WordPressの利用で危険に晒されるリ ...

ReadMore

 

-ブログ

© 2020 今日はじブログ Powered by AFFINGER5