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

  • 公務員、やめてみた
    • 公務員の仕事が辛い
    • 公務員からの転職ノウハウ
    • 公務員から起業・フリーランスへ
    • 公務員を辞めて後悔するか
  • 公務員試験対策
    • ★メインメニュー
    •  筆記試験の得点UP!
    •  面接スピード対策
    •  論文対策は1日で。
    •  スッと覚える勉強法
    •  進路を決められないときは
    •  公務員試験Tips
  • 現役公務員向け情報
  • 個人のWEB集客
    • ブログ運営
    • SNSマーケティング
  • プロフィール
    • お仕事の実績
    • コラム
  • お問い合わせ

元公務員イノウエガクのブログ

公務員から次のキャリアへ

You are here: Home / マーケティング / ブログ運営 / 【アフィンガー4】スマホでメニューを固定する方法!|30分で完成

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

2018年2月12日

スマホ用アコーディオンとは、スマホブラウザでブログを見たときに、画面上に出てくる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のスマホ用固定フッターメニューの作り方

Filed Under: ブログ運営

最新記事

【2022年】公務員の副業解禁どこまで・いつからOK?「月◯万円」稼ぐ事例・解禁の進み方についての予想

公務員試験のオススメ参考書(一般教養ver)合格経験のある元公務員がオススメ参考書を紹介します!

【公務員】10倍安心して辞める・退職するための手続き!退職後に急いでやることも紹介

【意味ある?】元公務員が語る「公務員のインターンシップ」メリット・デメリット解説

【日本一詳しい】公務員のメリット・デメリット解説21選!元公務員・民間企業・フリーランス経験者が語る「良かったこと」「悪かったこと」

【体験談】親に「公務員辞める」と伝えたい!必ず話しておきたい2ポイントを解説

公務員はApple Watchを使ったらアウト!?回避策とおすすめアプリも紹介!

【1年で5万円の損?】公務員の生命保険・医療保険・職員組合・共済保険は入るべき?

Primary Sidebar

YouTube更新中

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

カテゴリー

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

最新記事

  • 【2022年】公務員の副業解禁どこまで・いつからOK?「月◯万円」稼ぐ事例・解禁の進み方についての予想
  • 公務員試験のオススメ参考書(一般教養ver)合格経験のある元公務員がオススメ参考書を紹介します!
  • 【公務員】10倍安心して辞める・退職するための手続き!退職後に急いでやることも紹介
  • 【意味ある?】元公務員が語る「公務員のインターンシップ」メリット・デメリット解説
  • 【日本一詳しい】公務員のメリット・デメリット解説21選!元公務員・民間企業・フリーランス経験者が語る「良かったこと」「悪かったこと」

今日の作業用BGM

アーカイブ

  • 2022年7月 (45)
  • 2022年6月 (9)
  • 2022年2月 (6)
  • 2022年1月 (1)
  • 2021年9月 (6)
  • 2021年8月 (7)
  • 2021年7月 (17)
  • 2021年6月 (4)
  • 2021年5月 (6)
  • 2021年4月 (4)
  • 2021年3月 (6)
  • 2021年2月 (13)
  • 2021年1月 (5)
  • 2020年12月 (2)
  • 2020年11月 (7)
  • 2020年10月 (1)
  • 2019年6月 (1)
  • 2019年5月 (3)
  • 2018年12月 (1)
  • 2018年10月 (2)
  • 2018年9月 (4)
  • 2018年8月 (2)
  • 2018年7月 (7)
  • 2018年6月 (9)
  • 2018年5月 (10)
  • 2018年4月 (8)
  • 2018年3月 (4)
  • 2018年2月 (3)

Footer

このサイトについて

このブログは「働き方をもっと自由に、だけど堅実に。」をモットーに、公務員から第2のキャリアに挑戦する人を応援する情報サイトです。

公務員→民間企業WEBマーケター→フリーランスー→経営者とさまざまな働き方を経験した筆者が、実体験をもとに分かりやすい情報をお届けします。

著者情報

イノウエガク運営責任者/ライター:
イノウエガク

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

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

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

■もう少し詳しく
≫個人的なプロフィールはこちら
≫ライターとしての活動実績などはこちら(外部リンク)
≫ワタシのシュウカン
≫ワタシのサブスク

カテゴリー

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

タグ

Alfred Automator Evernote GoogleHome HHKB Instagram iPad Mac newspaper10 note Notion SEO STUDIO Twitter wordpress お仕事の実績 お金 よくある質問 アフィリエイト サーチコンソール テキストエディタ テーマ ヒーローハンター ビジネス フリーランス フリーランスってどう? マイニング マウス 仕事が辛い 先輩経験者の声 公務員 公務員からの転職体験談 公務員試験 初心者向けTips 書評 楽天経済圏 筆者の公務員試験の体験談 習慣 複業 試験の1週間前に読みたい 資産運用 転職のコツ 転職先はどう選ぶ? 辞めたい理由 面接対策を教えて!

お問い合わせ

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

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