Twenty Eleven ナビゲーションメニューの編集&アイコンの追加方法

ブログ開設から一ヶ月、メニューバーは放置しっぱなしで「Home」「Contact」「Privacy Policy」の3つしか設置してませんでした。

いくらモバイルビュー重視の風潮とはいえ、さすがに見栄えが悪いのできちんとカスタマイズすることにしました。(3/3現在、モバイルではメニューを非表示にしています。近日中にレスポンシブ化する…予定です)

追記:モバイルメニューもレスポンシブ化しました!「Twenty Eleven スマホ用ドロップダウンメニューの実装方法」の記事も書いています 🙂

スポンサーリンク

メニューコンテンツの選定

このブログは妊娠・出産関係の「ははぶろぐ」とWeb関係の「うぇぶろぐ」で2つの親カテゴリーを分けて、その下の階層で「妊娠・出産」「子育て」「WordPress」「ブログ運営」とさらに4つの子カテゴリーに分けています。

この4つのカテゴリーをメニューに追加して、サイト内の回遊率を上げようという目論見です。

また、プライバシーポリシーは簡単な自己紹介のページにまとめ、備忘録的にアクセス数などの月次報告を始めようと思い立ったので、この2つとホーム、コンタクトを合わせて合計8個のメニューにします

ついでに英語で書いていたメニューを日本語に直すことにしました。英語のほうがカッコイイ(安易にNYっぽいかなーとw)と思って始めたのですが、やはり日本語のほうが視認性が高いので。

<メニューバーコンテンツ予定>

  1. ホーム
  2. 妊娠・出産(子カテゴリー)
  3. 子育て(子カテゴリー)
  4. WordPress(子カテゴリー)
  5. ブログ運営(子カテゴリー)
  6. 自己紹介(固定ページ)
  7. アクセス推移(固定ページ)
  8. お問い合わせ(固定ページ)

スポンサーリンク

メニュー内容の編集

メニューバーへの追加・順番の変更はダッシュボードから行います。「外観」→「メニュー」からメニューを編集します。

固定ページ、投稿、カテゴリーなどの中から好きなページにチェックを入れてメニューに追加します。希望のページが見つからない場合は、全てのページ(View All)タブを開いているかも確認してください。

ここでもメニューに表示する文言を変更することができますが、固定ページは大元から日本語に直してあります。

あとはウィジェットなどと同じく、好きな順番にドラッグすればその通りに表示されます!もし追加したページが表示されない場合は、一番下の「テーマの場所」にチェックが入っているか確認しましょう。

今回は8個表示するので、#access ul liにwidth: 12.5%を指定して、幅が均等になるようにしました。

だいぶいい感じになりました(^_^)v (記事内容にモザイクをかけたのは、ローカルで試していた時のテスト記事の内容が適当すぎて恥ずかしいからですw)

アイコンの追加方法

せっかくなので各コンテンツにアイコンもつけます。

メニュー編集ページで、右上の表示オプションから「CSSクラス」にチェックを入れると、各liに対してクラスを設定できるようになります。

ico-home, ico-maternity, ico-childcareなど任意の名前をそれぞれにつけて、CSSで好きなアイコンを指定すればOK!

今回もFont Awesomeを使っていますので、初めて使う方は<head></head>内に下記コードを加えてください。詳しい使い方はHAM MEDIA MEMOさんなどたくさんの方が解説してくださっているので割愛しますm(._.)m

https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

CSSのコードはこちらです。

#access {
  background: #eee;
  box-shadow: none;
}
#access ul {
  list-style: none;
}
#access ul li {
  float: left;
  width: 12.5%;
  text-align: center;
  position: relative;
}
#access a:before {
  padding-right: 2px;
}
#access .ico-home a:before {
  font-family: FontAwesome;
  content: '\f015'
}
#access .ico-maternity a:before {
  font-family: FontAwesome;
  content: '\f08a'
}
#access .ico-childcare a:before {
  font-family: FontAwesome;
  content: '\f118'
}
#access .ico-wordpress a:before {
  font-family: FontAwesome;
  content: '\f108'
}
#access .ico-blog a:before {
  font-family: FontAwesome;
  content: '\f14b'
}
#access .ico-profile a:before {
  font-family: FontAwesome;
  content: '\f0fc'
}
#access .ico-report a:before {
  font-family: FontAwesome;
  content: '\f201'
}
#access .ico-contact a:before {
  font-family: FontAwesome;
  content: '\f003'
}

そしてメニューの完成形がこちら!

おー、思っていた形になりました!アイコンがつくと「やった感が出る」ので好きですw

まとめ

やっぱりパッと目につくメニューがしっかりすると見栄えがいい!早い段階でやっときゃよかったと猛省しております。

ではRyo@nydewebdesignでしたー♪

スポンサーリンク

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする