[Blogger] ナビゲーションバーを設置してサイトの風通しを良くしました。できればもう一つ記事を読んで欲しいから

あわせて読みたい

梅雨です。風通しをしないと色々困ります。サイトも同じだろうな、ということで、ナビゲーションバーを設置しました。来ていただいた方に「おっ仕方ないなぁ、もう一つ見ていくか」と感じて頂けると嬉しいです。

もっとも、今まで無かったんかい!とも言えます。はい、出来ることからコツコツと進めています。はじめにWordPressにコードを設置します。

function.php

function.phpに以下のコードが必要です。「あれ、ないわ」という時は追加します。

[code]
register_nav_menus(array(‘navigation’ => ‘ナビゲーションバー’ ));
[/code]

haeder.php

次にナビゲーションバーを表示したい場所に下のコードを追加します。普通はhaeder.phpだと思います。天邪鬼なので、私はsingle.phpに設置しています。わいるどだろ。

[code]</pre>
<div id="nav"></div>
<pre>
[/code]

スタイルシート

このままだと単なるリストで表示されます。機能的にはそれでもOKなのかも知れませんが、見た目がかなりがっかりです。体裁をスタイルシートにて整えます。

[css]
/* navi menu */

div#nav ul {
background-color: #2b2b2b;
padding: 8px 0;
margin: 0 0 20px;
}

div#nav li a:hover {
color :#bbc8e6;
}

div#nav li a {
font-size: 1em;
color :#ffffff;
text-decoratiion: none;
}

div#nav li {
display : inline ;
list-style-type: none ;
border-right : solid 1p #ffffff;
padding-left: 5px;
padding-right: 15px;
}
[/css]

以上にて、表示するためのコード配置は出来上がりました。ここまで出来たら、もうコードを書き書きすることはおしまいです。

管理画面

ログインして、「外観」−「メニュー」を開きます。画面右手のメニュー設定部分の「+」をクリックして新しいメニューを作成します。

navi01

名前を入力して「メニューを作成」をクリックします。

navi02

画面左下のカテゴリーから、メニューに表示したいカテゴリーを選択し、「メニューに追加」をクリックします。

navi03

ここでは「0900:レビュー」と「0800:ライフハック」を選択します。これで「追加」をクリックすると、先ほど作ったメニューのカラムに表示されます。

navi04

私の場合、整理する都合上、カテゴリーに番号を割り振っています。そのままだとダサいです。そんなときも大丈夫です。右の矢印をクリックすると”ナビゲーションラベル”との項目が現れます。

ここを変更することで自由にナビゲーションバーの表記を変更できます。

navi05

「0900:レビュー」が「レビュー」になりました。

navi06

ここの調整が出来上がったら、あと少しです。

左上のテーマの場所のなかから、新しく作ったメニューを選択します。これだけで簡単に切り替わります。

nav007

このようにナビゲーションバーが表示できました。

navi008

いままで、なんで設置していなかった!んだ状態でした。やっと設置しました。意外とこの方法についてネットでは見つかりませんでした。

WordPressレッスンブックの258ページからを読んですんなり設置できました。おかげさまです。感謝です。

それでは、せっかくのナビゲーションバーです。ぜひ、この記事だけでなく、他の記事もどうぞ。きっとあなたと出会うことを待っているエントリーがあります!

WordPress レッスンブック 3.x対応
エビスコム
ソシム
売り上げランキング: 6,556

あわせて読みたい

シェア大歓迎

この記事が役に立ったり、参考になったり、読んで嬉しいと感じていただけたら、ぜひ下のボタンからシェアしてください。シェア・ツィートしていただけると、飛び跳ねるほど嬉しく、今後の記事作成の原動力になります。

大歓迎です!ぜひシェアしてください。


広告

こっそり感想を送信する

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

開催している講座に参加する

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告