A Piece of Paper.

「現実」と「非現実」のはざま。

ナビゲーションメニューを設置してみた!@はてなブログの始め方

ブログを始めてみたばかりの僕が見よう見まねでやってみたデザインのカスタマイズを書いています。

前回のエントリでは、「テーマ選び」と「ヘッダー画像」のカスタマイズについて書きました。

tachimimi.hatenablog.com

ヘッダーに続いて、取り入れたナビゲーションバー(グローバルメニュー)について今回は書いてみようと思います。

コレ↓

f:id:tachimimi:20180927000249p:plain

そもそも、何のために作るかというと、

記事を書いていくと日記であったり、本のことだったり、いろんなことがズラズラと繋がって表示されてしまい見づらいですよね。

そういう時にサイドバーなどのカテゴリを見にきてくれた人にクリックしてもらうのも良いのですが、ヘッダー下にビシッと表示がしてあれば楽に移動をしてもらえます。

また、プロフィールやリンクなど自由に貼ることもできます。

つまり、見やすくなり、その人がどんなことを書いているのか、見せたいのかがパッと見てわかるようになります。

さて、その設置の仕方ですが、下記のサイトを参考にしました。

(素人なので参考にしてばかりです。。が、逆に言えばコピペでカスタマイズできちゃうということです💡)

www.yukihy.com

このサイトに書かれているコード1をベースに下にあるカスタマイズを参考にちょっとだけ変更しました。

ものの5〜10分ぐらいの作業です。

f:id:tachimimi:20170730135122p:plain

この「TOP」や「カテゴリ1」などと書かれているのが、実際にナビゲーションバーに表示されます。

ですので、僕の場合は、「Home」「Books」など自分のサイトに合った形に書き換えました。

また、その後にhref='url'と書かれた部分にカテゴリのURLをコピペします。

ただし、、、、このURLは記事を書いてカテゴリの設定を作ってからやった方が確実です。

方法としては、設定で公開設定を一旦「自分のみ」に設定をして、

f:id:tachimimi:20170730135907p:plain

記事の下に出てくるカテゴリのアイコンのリンク先をコピーします。

 

たち耳

にほんブログ村 ライフスタイルブログへ
にほんブログ村

にほんブログ村 住まいブログへ
にほんブログ村