うえのブログ

試行錯誤をしながらまともなブログを書けるようになるブログ

うえのブログ

ヘッダー画像の下にグローバルナビゲーションを設置してみた

スポンサーリンク

f:id:uenoyou111:20171016165506j:plain

 

上野ですこんばんは。

 

もっとカテゴリーが増えたら設置してみたいな~って思ってたんですけど、ついに我慢できず実装してみました。

 

画面上部にこのブログの概要?みたいな感じで設置です。

 

やり方とか、色々まとめてみたので記しておきます。

 

 

 

 

グローバルナビゲーションとは

 

簡単に言えば、決まった並びで常時表示されるメニューバーみたいなものです。

 

f:id:uenoyou111:20171016225808j:plain

 

当ブログで実装するとこんな感じです。ちなみに前までは右下のわかりづらい部分にカテゴリーとして隠れておりました。

 

f:id:uenoyou111:20171016181523j:plain

 

こんなとこにあっても、わかりづらいですね。なので画面上部に集約しました。これでどんな記事があるか、なんとなくでもわかると思います。

 

ちなみに画面幅が小さくなるとトグルメニューというこんな画面に切り替わります。スマホとかこんな感じ。

 

f:id:uenoyou111:20171016230012j:plain

 

押した瞬間にメニューが出てきます。

 

f:id:uenoyou111:20171016230035j:plain

 

スマホ版は常に一番上にこのトグルメニューが現れるように固定化しました。ヘッダー画像の下とか言って大嘘ですね。

 

ということで、以下から紹介していきます。

 

 

参考にしたブログ様

 

www.yukihy.com

 

当ブログでも、シェアボタンでお世話になっているゆきひー(id:ftmaccho)様です。

 

とってもわかりやすく、カスタマイズのやり方まで載せて下さってます。

 

ここを見るより遥かに分かりやすいです。設置した後の自分が行ったカスタマイズの流れをまとめていきます。

 

 

まずは設置

 

実際にそのまま設置した場合、このような表示になるかと思います。

 

f:id:uenoyou111:20171016214152j:plain

 

黒いメニューでちょっとイメージ色には合わない感じ。

 

クリックすればドロップダウンメニューが出てきてすごいオシャレです。

 

ただ、私のブログはそんなにカテゴリーが多くないので削ります。あとは色とかリンクとか調整していきたいと思います。

 

 

実際に行ったカスタマイズ

 

色の変更やら、一連の流れをまとめております。

 

以下より実際に行ったカスタマイズを一つ一つ載せていきます。

 

 

色の変更

 

やはり、オレンジ背景の白抜き文字を採用したい。ということで色を変更していきましょう。

 

作成者様はわかりやすく、コードに番号を付けて下さっています。

 

f:id:uenoyou111:20171016222003j:plain

 

この/*4*/とか/*5*/とかってところですね。色の指定は♯から始まる英数字3桁or6桁になります。

 

デザインCSSに貼り付けたコードを見ていきます。まず変更すべき箇所は7、8、9、10、11、12。トグルメニューだと17、18になります。

 

私は特に色を混ぜておしゃれにしようと思わなかったので、同じ系統の色コードを使います。色コードに関してはこちらを参照にしてください。

 

www.colordic.org

 

私はアホなせいか、どこがどの色変わるかよく分からなかったので画像にしちゃいます。以下は番号に合わせてどこが変わるのか、になります。

 

7番を変更(メニュー両端)

 

f:id:uenoyou111:20171016215105j:plain

 

8番を変更(メニュー余白)

 

f:id:uenoyou111:20171016220300j:plain

 

9番を変更(親リンクの背景色)

 

f:id:uenoyou111:20171016220406j:plain

 

10番を変更(親リンクの文字色)

 

f:id:uenoyou111:20171016220421j:plain

 

11番を変更(マウス当てた時の色)

 

f:id:uenoyou111:20171016220434j:plain

  

12番を変更(マウス当てた時の文字色)

 

f:id:uenoyou111:20171016220448j:plain

  

17番を変更(トグルメニューのMENU背景色)

 

f:id:uenoyou111:20171016221718j:plain

 

18番を変更(MENUの文字色)

 

f:id:uenoyou111:20171016221743j:plain

 

これで色バランスを考えつつデザインなんて出来ちゃいますね。私はオレンジにしつつ、マウスを置いたら反転するようにしました。

 

 

使わないカテゴリーの削除

 

<ul class="second~/ul>を削ればOKです。具体的には

 

f:id:uenoyou111:20171016220905j:plain

 

これを

 

f:id:uenoyou111:20171016220921j:plain

 

これにすると、ドロップダウンメニューは出なくなります。リンク先を指定すればクリックだけでカテゴリーに飛べるように。

 

また、カテゴリーを増やす場合は同じような塊をコピペするだけでOKです。私は減らしたかったので、同じような塊を削除しました。

 

 

アイコンの削除

 

このままだと、ドロップダウンメニュー用に矢印アイコンが載ったままになります。

 

f:id:uenoyou111:20171016221051j:plain

 

ここはタイトル下に貼り付けしたコードを変更する必要があります。こちらを

 

f:id:uenoyou111:20171016221257j:plain

 

まるっと削除

 

f:id:uenoyou111:20171016221318j:plain

 

するとアイコンが消えます。

 

f:id:uenoyou111:20171016221440j:plain

 

削除した部分に違うクラス名とコードを入れれば違うアイコンが使えます。アイコンを一覧にして下さってるブログ様はこちら。

 

shirokai.hatenablog.com

 

 

リンクを挿入

 

デザインCSSに貼り付けたコード内に、日本語で「1階層目のリンク」という部分があります。こちらにカテゴリーに位置するURLを貼り付けます。

 

私は右下のカテゴリーで貼り付けたいリンク先の上で右クリック。リンクのアドレスをコピーでURLを抜き取りました。

 

f:id:uenoyou111:20171016221609j:plain

 

後はカテゴリーをクリックして、アドレスバーから抜き取るやり方ですかね。このURLを貼り付ければOKです。

 

 

まとめ

 

以上で完成です。今回はさほど苦労することもなく、スムーズに設置することが出来ました。

 

まとめると逆に長くなってしまったんですが。

 

カスタマイズ楽しいけど、大きくテーマを変更する時は大変そうです。しばらくはこのままで行きます。