【有料テーマAFFINGERカスタマイズ】スマホ用スクロールメニューを作り方とメリット・デメリットを解説

悩む人

有料テーマ【AFFINGER】を使って、スマホでスクロールできるメニューを作成したいのですが、どこを操作すればいいのでしょうか?

本記事ではこのような質問にお答えします。

今回作成されるスマホ用のスクロールメニュー完成形(追記:以前に作成したサイトです。)

After画面上部に黒の背景のメニューが追加されているのが確認できると思います。このメニューはスマホではスクロールしてみることができます。

このようなオシャレなメニューを作成する方法を解説していきます。

やまゆー
多くの読者はスマホユーザーなので、試してみる価値ありです!

有料テーマ【AFFINGER】でスマホ用スクロールメニューを作る方法

ブログ開設

スマホ用スクロールメニューを作成する前にまずは手順の解説です。

スクロールメニューを作る簡単な流れ

  1. カテゴリーを作成する
  2. メニューを作成する
  3. メニューの色を変更する
  4. メニューをスクロール式にする

✔①カテゴリーを作成

初めに、ブログ記事を分類するためのカテゴリーを作成します。

カテゴリーはワードプレスメニューの「投稿」→「カテゴリー」から作成できます。

カテゴリー

注意ポイント

名前

実際にサイトに表示される名前

スラッグ

URLに使われるので、ひらがなや漢字は避けよう。英単語で書くのが無難です。

(例)ブログ運営→blog

✔②メニューを作成

メニューはワードプレスメニューの「外観」→「カスタマイズ」→「メニュー」から作成できます。

メニュー作成

✔③メニューの色を変更する

メニューの色の変更はワードプレスメニューの「外観」→「カスタマイズ」→「メニューのカラー設定」→「PCヘッダーメニュー」から変更することが出来ます。

背景色と背景色(グラデーション上部)の色を変えるだけで、綺麗なグラデーションに仕上がります。

④メニューをスクロール式にする

有料テーマ【AFFINGER】ではなんと、ほぼワンクリックでスクロール式になります。

有料テーマ「AFFINGER」を導入した人は、ワードプレスメニューに「AFFINGER管理」があります。

ここの「メニュー」→「その他スマホ用メニュー」欄にある「ヘッダ―用メニュー(横列)を有効化」これにチェックを入れて「save」を押すだけです。

参考の画像も載せておきます。

スクロールメニュー

これで完成です!ほとんど操作がないので、誰でも簡単に作ることができるかと思います。このようなオシャレなメニューが簡単にできるのは、有料テーマの強みと言えます。

スクロール式メニューのメリット

スクロールメリット

僕が感じるスマホ用メニューをスクロール式にするメリットを挙げてみました。

スクロール式メニューのメリット

サイトがオシャレになる

サイトがオシャレだと、読者が増えたり、読者の購買意欲を高めたりする効果が期待できる。

メニューに場所を取らない

メニューをコンパクトに表示できるので、ブログ記事を中心に見せたい人に最適。

サイトの見た目が良くなるとpv増加の可能性も上がります。その理由は以前こちらの記事で解説しています。

>>【有料テーマAFFINGER推奨】ブログ初心者でも記事が読まれるようになる書き方テクニック講座

スクロール式メニューのデメリット

スクロールメニューデメリット

逆にデメリットに感じるところも挙げます。

スクロール式メニューのデメリット

読者に手間をかける

スクロールする動作が不便に感じてしまう人もいるかもしれません。

サイトスピードに少し影響がある

正直そこまでの影響はないですが、若干の影響がある可能性があります。

読者ファーストという考えを優先したいのであれば、検討が必要です。

サイトのオシャレを追及するなら導入しよう

サムネイル

今回はスマホ用のスクロール式メニューを作成する方法を書きました。

メリット・デメリットを見てもらえば分かる通り、スクロール式メニューには一長一短があり、それを踏まえてブログに導入するべきか検討してもらえればと思います。

今回は以上です。

-💻ブログ運営

Copyright© おとな育てブログ , 2021 All Rights Reserved.