• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • イノウエガクのブログ

  • About
  • Projects
    • YouTube
    • 講演・セミナー
    • ライター・編集
    • Webコンサル
  • Blog
    • YouTube進捗報告
    • 公務員、やめてみた
    • 公務員試験
    • マーケティング
    • 記事一覧
  • Contact
イノウエガクのブログ-日本一変なキャリアの元公務員|公務員を辞めたい人を応援

イノウエガクのブログ-日本一変なキャリアの元公務員|公務員を辞めたい人を応援

社会全体の適材適所へ

現在の場所:ホーム / マーケティング / ブログ運営 / 【アフィンガー4】スマホでメニューを固定する方法!|30分で完成

【アフィンガー4】スマホでメニューを固定する方法!|30分で完成

2018年2月12日 by イノウエガク

スマホ用アコーディオンとは、スマホブラウザでブログを見たときに、画面上に出てくる3本線のメニュー呼び出しボタン
スマホ用アコーディオンってこんなの

グローバルメニューを画面に固定すれば、どこからでもホームにアクセスできます。

回遊率が上がってアクセスアップにも繋がる便利な機能です。

ブログのアクセスの80%くらいが「スマホ」の時代です。

スマホ時代に合わせて、ブログもスマホ向けにカスタマイズしましょう。

当ブログもスマホで見ると、下にメニューが出てくるはずです。

こんな感じのメニューを作ってみましょう!

今回は「アフィンガー4」で「スマホで追尾するグローバルメニューの作り方」を紹介します。

30分で作って、アクセスアップ!

目次

  • アフィンガー4でスマホ用メニューを作ろう
  • アフィンガー4のメニュー設定をしよう
  • アフィンガー4のメニューにアイコンをつけよう!
  • まとめ
    • 関連記事:

アフィンガー4でスマホ用メニューを作ろう

スマホ用のメニューは幅を小さくする必要があります。

そこで、パソコンで表示されるメニューと、スマホで表示されるメニューを別々に作りましょう。

まずはワードプレスの編集画面から「外観」→「メニュー」でメニューの編集画面へ。

「新規メニューの作成」から、適当にメニューの名前をつけて「メニューの作成」

メニューに表示させたい固定ページやカテゴリーを追加。

「スマートフォンフッター用メニュー」を選ぶのを忘れずに!

最後に「メニューを保存」してスマホ用メニューの完成です。

スマホは画面が細いため、メニューの項目は多くても5つ程度にしましょう。

アフィンガー4のメニュー設定をしよう

先ほど作ったスマホ用のメニューが、ブログでどのように表示されるか設定します。

ワードプレスの管理画面から、「AFFINGER4管理」へ。

「メニュー設定」の「スマホ用アコーディオンメニュー」から「スマートフォンメニューを表示しない」にチェック。
その少し下「スマホ用フッターメニューを表示する」にチェックをつけます。「SAVE」を忘れずに!

さあ、自分のスマホでブログを見てみましょう!

画面下にメニューが固定されているはずです。

ちなみに「スマホ用アコーディオンメニュー」は、ハンバーガー型のメニューのことなんですよ。

ハンバーガー型メニューの方がしっくりくるよね

アフィンガー4のメニューにアイコンをつけよう!

メニューは固定できたけど、なんか味気ない・・・

では、メニューのそれぞれの項目にアイコンをつけてみましょう!

各項目がわかりやすくなって、ポップな見た目になりますよ!

まずは「外観」→「メニュー」と進み、さっき作ったスマホ用メニューの編集画面に入ります。

アイコンはここの「ナビゲーションラベル」で編集します。

肝心のアイコンはFont AwesomeというサイトからHTMLタグをコピーして貼り付けるんです・・・

アフィンガー4では最新版のアイコンに対応していないみたいです。

少し古いアイコンが紹介されているサイトからお借りしましょう。

Webフォント「Font Awesome4」の使い方

使いたいアイコンが見つかったら、

  1. アイコンのHTMLタグをコピーして、ナビゲーションラベルに貼り付けます。
  2. 貼り付けたHTMLタグの後ろに <br/> と追記。
  3. <br/>の後ろにアイコンの名前を書きましょう。

要は、

アイコン

改行(<br/>)

ガクマーケの井上って誰よ?

と書くわけですね!

 

これで終わりです。お疲れ様でした!

 

さて、最後にスマホで自分のブログをチェックしてみましょう。

どうですか?ちゃんとアイコンが表示されていますか?

文字化けしている場合は、アフィンガーに対応していないアイコンを使った可能性が高いです。

別のアイコンで試してみてください。

まとめ

スマホでグローバルメニューを固定する方法を紹介しました。

作り方をおさらいしますと、

  1. スマホ用のメニューを作る
  2. メニューがどうやって表示されるか設定する
  3. アイコンを設定する

の3ステップで完了です。

どこからでもホームやカテゴリー一覧へリンクできますので、回遊率がアップすると思います。

簡単なのに、ブログの見た目がかっこよくなりますよ!

合わせて読みたい

【初心者】アフィンガー5のスマホ用固定フッターメニューの作り方

イノウエガク
イノウエガク

「日本一変なキャリアの元公務員」

北海道在住のライターです。
olbb(株)取締役、ガクマーケティング代表

市役所と北海道庁職員を併任した後、WEBマーケターに転職。2年後に独立し、現在はライター&経営者をしています。

「働き方をもっと自由に、だけど堅実に」がモットー。

■もう少し詳しく
≫プロフィール・お仕事の実績
≫お問い合わせはコチラ

関連記事:

  1. 自己投資としてのブログ。お金を求めないブログ。
  2. せまるMarsEditの終焉?WordPressエディタに見る、外部ツールの未来
  3. やっぱりブログはUlysses。20種類以上のテキストエディタを使ってきた男のオススメ
  4. 【WordPress】当ブログのカスタマイズ内容まとめ【2021/08/07時点】

Filed Under: ブログ運営

最新記事

お題:新人公務員に1つだけ伝えるなら

2023年12週目 YouTube進捗報告レポート

公務員専用マグカップを開発しました

2023年11週目 YouTube進捗報告レポート

募集:人事異動あるある

「公務員からの転職キャリアカウンセリング」をリリースしました

2023年10週目 YouTube進捗報告レポート

2023年9週目 YouTube進捗報告レポート

最初のサイドバー

運営責任者

アバター「日本一変なキャリアの元公務員」

北海道在住のライターです。
olbb(株)取締役、ガクマーケティング代表

市役所と北海道庁職員を併任した後、WEBマーケターに転職。2年後に独立し、現在はライター&経営者をしています。

「働き方をもっと自由に、だけど堅実に」がモットー。

■もう少し詳しく
≫プロフィール・お仕事の実績
≫お問い合わせはコチラ

NEWS!

YouTube更新中

YouTubeでも公務員について動画投稿中です。YouTubeはコチラ

カテゴリー

  • YouTube
    • ネタ募集
    • YouTube進捗報告
  • 公務員、やめてみた
    • 公務員の仕事が辛い
    • 公務員からの転職ノウハウ
    • 公務員から起業・フリーランスへ
    • 公務員を辞めて後悔するか
    • ポートフォリオワーク
  • 公務員試験
    • 筆記試験の得点UP!
    • 面接スピード対策
    • スッと覚える勉強法
    • 進路を決められないときは
    • 公務員試験Tips
    • 論文対策は1日で。
  • マーケティング
    • ブログ運営
    • SNSマーケティング
  • 効率化・タスク管理
    • できる!GoogleHomeで習慣作り
    • Alfredのオススメ
  • ガジェット
    • HHKBが全てを幸せにする
  • 書評・レビュー
  • お金の学問
  • ゲーム
  • 活動報告
    • セミナー
  • コラム
  • 未分類

Footer

お問い合わせ

TwitterのDMまたはお問い合わせフォームからご連絡ください。
「こんなのどう?」なんてふんわりしたご相談も喜びます。

寄稿・ボランティア募集中

ブログやYouTubeの更新を手伝ってくれるボランティアを募集しています。転職・副業で役立つ、知名度やスキルを高めてみませんか。

寄稿したい方もお気軽にお問い合わせください。

詳しくはコチラ

  • メール
  • Facebook
  • LinkedIn
  • TikTok
  • Twitter
  • Youtube

最新の投稿

  • お題:新人公務員に1つだけ伝えるなら
  • 2023年12週目 YouTube進捗報告レポート
  • 公務員専用マグカップを開発しました
  • 2023年11週目 YouTube進捗報告レポート
  • 募集:人事異動あるある

メニュー

  • トップページ
  • このサイトについて
  • プロフィール
  • サイトマップ
  • プライバシーポリシー
  • 免責事項
  • お問い合わせ

Copyright © 2023 ガクマーケティング