ブログ

スマートフォンスライドメニューのアイコンが消えた?AFFINGERでのカスタマイズ方法

*アフィリエイト 広告を利用しています。

スマートフォンスライドメニュー1

ブログはひとつ改善するとまたひとつ課題が出てきます。でもこの改善の繰り返しがブログは楽しいですね。

困っている人
ブログロゴをCanva Proで制作しました。AFFINGERでヘッダーの背景を白にするとスマートフォンのスライドメニューアイコンが見えなくなってしまいました。どのように修正したら良いですか?
まさにこの状況を経験しました。スマートフォンスライドメニューのアイコンのカラー変更して対応しました。
global555

この記事はスマートフォンスライドメニューのアイコンが見えなくなったらどうやって対応する?という課題に対してご説明します。

結論:「外観」-「カスタマイズ」- 「メニュー」-「スマートフォンスライドメニュー」から色変更できます。

スマートフォンスライドメニューとは

ブログテーマAFFINGERにおけるスマホ用スライドメニューとはスマホでブログを見た時に「左上もしくは右上に表示されるメニュー」のことです。

この3本線のところですね。

スマートフォンスライドメニュー2

この3本線に行くと、「メニューがスライド表示」されます。これがスマートフォンスライドメニューです。

AFFINGERでスマートフォンスライドメニューの作り方

AFFINGERでスマートフォンスライドメニューを作るには、

ワードプレスの「外観」-「メニュー」から作成できます。

スマートフォンスライドメニューなどのグローバルナビゲーションの作り方はこちらの記事で詳しくご説明しています。

アドセンス審査にむけて。グローバルナビゲーションの作り方

あわせて読む
グローバルナビゲーションの作り方1
アドセンス審査にむけて。グローバルナビゲーションの作り方

グーグルアドセンス合格にはグローバルナビゲーションは必要ということでグーグルアドセンス審査に向けてグローバルナビゲーションの作り方を解説します。
サイトを見て頂いた方がより良く理解しやすくするためにグローバルナビゲーションが必要ですね。

続きを見る

スマートフォンスライドメニューの色・位置・デザイン設定のカスタマイズ方法

AFFINGERの場合、ディフォルトの設定でもカッコよく自動的にデザインしてくれます。やはり有料ブログテーマを使うことを検討したいですね。

なので基本的にAFFINGERにおまかせしておけば良いです。

でも少しづづブログを改善していきたいですよね?

ブログのヘッダーロゴを作った場合のカスタマイズ

Canva Proなどを使ってブログのヘッダーロゴを作ることできます。

ロゴを作ると、せっかく作ったブログのロゴを見映えよくしたくなりますよね。ヘッダー背景を緑から白にしたくなりました。(実話です。)

ブログのロゴを無料で作成する方法3

ブログロゴの作り方はこちらの記事をご覧いただければと思います。

デザイン素人でもすぐできる!ブログのロゴを無料で作成する方法

あわせて読む
ブログのロゴを無料で作成する方法2
デザイン素人でもすぐできる!ブログのロゴを無料で作成する方法

ブログのロゴデザインを無料で作成したいと思いませんか?あなたのブログタイトルがテキスト表記だとやっぱり少し初心者感がでてしまいます。今回はCanvaを使ってデザイン素人でもすぐできるブログのロゴを無料で作成する方法をご紹介します。

続きを見る

スマートフォンスライドメニューのアイコンの色のカスタマイズ

注意ポイント

AFFINGERのディフォルト設定ではスマートフォンスライドメニューのアイコンは「白色」設定です。ヘッダー背景を白にすると見えなくなります。

スマートフォンスライドメニュー3

実際にこんなかたちで見えなくなりました。これではユーザー様にとって使いにくいのでダメですね。

ではどのようにスマートフォンスライドメニューのアイコンの色を変更するのか?と言うと

ワードプレスの「外観」-「カスタマイズ」- 「メニュー」-「スマートフォンスライドメニュー」から変更できます。

スマートフォンスライドメニュー4

試しにフッターの色と同じ色を設定してみました。

スマートフォンスライドメニューのアイコンの位置・デザイン設定のカスタマイズ方法

色は修正できましたので、今度はアイコンの位置やデザイン設定についてもカスタマイズします。

「AFFINGER管理」」-「メニュー」- 「スマホ用スライドメニュー」から変更できます。

スマートフォンスライドメニュー5

今回はアイコンデザインを「カット」にしてみました。

まとめ

本日はスマートフォンスライドメニューのアイコンが見えなくなった場合の解決策について、ブログテーマAFFINGERの色修正についてご紹介しました。

結論:「外観」-「カスタマイズ」- 「メニュー」-「スマートフォンスライドメニュー」から色変更できます。

AFFINGERは有名ブロガーの方も多く使っている有料ブログテーマです。

SEOに強くキレイにブログを作れることはもちろんのこと今回のアイコンの色など細かいところまで設定できますので気になる方はぜひチェックしてみてくださいね。

⬇️ブログテーマAFFINGERを見る。

  • 最新はAFFINGER6となりました。
  • AFFINGER6はブロックエディターがメインです。
  • AFFINGER はブログの先輩方もたくさん使っているので使い方の記事も多く参考になります。

WordPressテーマ 「ACTION(AFFINGER6)」

ワードプレスブログの有料テーマのおすすめはAFFINGER6!

⬇️グーグルアドセンスの合格に向けてのブログ改善の記事を見る。

アドセンス審査

ブログ開設

メタディスクリプション・抜粋

メタ情報

画像のalt属性

グローバルナビゲーション・ヘッダー・サイトマップ

パーマリンク

記事タイトル

カテゴリー

記事の書き方

ブログ運営

リライト

SEO対策

Twitter

⬇️グーグルアドセンス合格後の設定の記事はこちらです。

⬇️私も使っているブログのサーバー:エックスサーバーはこちらです。

色々キャンペーンもありますのでチェックしてみてくださいね。



会社からの収入だけに依存しない。10分あればできるブログ副業の始め方。

本日は以上です。最後まで読んでいただきありがとうございます。global555(Twitter:global5551)でした。

  • この記事を書いた人

global555

外資系のグローバル企業で10年間マーケターとしてはたらいています。 英語でビジネス!グローバルリーダーになって活躍したい。ビジネス英語・スキル向上を応援するサイトです。 あわせて「会社からの収入だけに依存しない」ように副業ブログを始めたい方。資産運用を始めたい方に向けてお役にたつ情報をわかりやすく提供するサイトを目指します。

よく読まれている記事

英語会議でついていけない 1

ネイティブとの英語会議で聞き取れなくて困ったことありませんか。話す内容は何度も練習したり、原稿を作ったりすることで対策できても質問が聞き取れない。英語会議についていけない時に使えると便利な3点を解説します。

グーグルアドセンス 2

ブログを始めた方の最初の壁がグーグルアドセンスではないでしょうか。軽々壁を飛び越えていくブロガーが多い中、私は10回有用性の低いコンテンツで不合格をからのグーグルアドセンス合格となりました。グーグルアドセンス合格を目指す中で考えたことをご紹介します。

英語会議ポイント1 3

来週の英語会議があると心配ですか?この記事は外資系企業で学んだ英語会議のポイント10個をご紹介します。
英語会議の設定の仕方から、聞き取れない対策、発表の仕方、資料の作り方についてもご説明します。
苦手意識を持っている方は是非読んでください!

副業ブログの始め方1 4

値上げラッシュの世の中で会社からの給料はなかなか上がりませんよね。まったくの初心者が10分あればできるブログ副業の始め方については解説します。この記事を読めばワードプレスブログを始めたい方がサクッと10分で始めることができますよ。

SBIネオモバイル証券で初めての配当金 5

株式投資はリスクがあって怖いですよね。1株でも持っているだけで配当金がもらえる高配当株についてご説明します。日本株で1株からSBIネオモバイル証券を使って日本株の高配当投資で初めての配当金をもらえましたので詳細をご説明します。

-ブログ