omitsublog

自分がいいと思ったもの、チャレンジしたこと、試したものなどを紹介してくブログ。いろんな分野のハンドメイドに挑戦中。クズ男ガチャの引きなら誰にも負けない自信あり

グローバルナビゲーションを設置

こんにちは。おみつです。

グローバルナビゲーションを設置してみました。

 

 

グローバルナビゲーションとは、ヘッダの下にある、特定のページにすぐ飛べる便利なやつですね。大体カテゴリのトップに飛べるように設定されている方が多いと思います。

 

 

ブログのカテゴリ分けって結構大事です。してない方は早めにやった方がいいと思います!

今回はカテゴリ分けされているという前提でいきます。

 

 

 

 

コードを入手  

 

 まずはグローバルナビゲーションを設置するためのコードが必要なんですが、もちろん私は書けませんので、他ブログ様のコードを写させてもらいます。

 

 

akiueo.hatenablog.com

 

こちらのブログ様を参考にさせてもらいました。ありがとうございます。

ちなみに私は3個目に書いてあるコードをコピーさせてもらいました。

 

 

 

はてなブログにコードを貼り付ける


コードをコピーさせてもらったら、それをブログに反映させるために貼り付けます。


デザイン > スパナマーク > ヘッダ


f:id:omitsublog:20181113134033j:image

 

 

タイトル下の欄にコピーしたコードを貼り付けます。

 

 

コード内にはカッコでタグの意味を書いてくれていますが、実際に使うときはカッコごと消す必要があります。

 

 

それと、スマホでやったら何故か改行がされてなくて1の行にばーっと貼り付けられてしまったので改行も自分でやりました。” }”の後で改行しただけです。


f:id:omitsublog:20181113123441j:image

 

結局その後にパソコンでコピペやり直したら、書いてある通りに綺麗に貼り付けられました。

 

 

とりあえずこの状態で反映させてみるとこんな感じになります↓


f:id:omitsublog:20181113123428j:image

なんか右に寄ってない…??

ちなみにパソコンではいい感じの配置になっていました。スマホ画面でだけ右に寄っていました。

 

 

とりあえずここからは自分でいじる必要があるので、まずは色をいじってみることにしました。

 

 

 

色の変更

 

そのままでいい方はそのままで大丈夫です。

私はなんとなく全体的にピンクっぽいデザインなので、グローバルメニューも近い色にしようかなと思いました。

 

 

www.colordic.org

 

こちらで好きな色のカラーコードを取得します。

 

 

background-color: #000000の部分の色を#c82c55に変更しました


f:id:omitsublog:20181113123504j:image

 

ピンクになりました。

 


文字色はそのままにしましたが変える場合は、18行のcolorの後ろを変更。

各項目を区切ってる線は、15行のborder-right:1px solidの後ろを変更すれば変わります。

 

 

右に寄っているのを修正

 

 右寄りの修正法を色々探した結果、5行目のtable-layout: fixed;の下に行を追加してmargin-left:-40px; と入力したら真ん中になってくれました。

 

f:id:omitsublog:20181113123639j:plain

 

f:id:omitsublog:20181113123537j:image

 

デザインはこれでいいかなと思います。

後はリンク名の入力と、URLをつなぎます。

 

 

 

リンク名とURLをつなぐ

 

リンク名(メニュー名)を入力しないとどこに飛ぶのか分かりませんし、URLがちゃんと入力されてないとページに飛べません。

 

 

まず、グローバルナビゲーションで表示させたいカテゴリのトップページのURLをコピーします。

カテゴリトップは カテゴリ > カテゴリ一覧 > カテゴリ名をクリックすれば開きます。


f:id:omitsublog:20181113123612j:image

 

 コピーしたURLをコードに貼り付けます。

貼り付ける場所は<li><a href="#">MENU</a></li>の#の部分に貼り付けます。

リンク名はMENU(可変)のところを変更して入力します。

 

私の場合は”ハンドメイド”の名前でハンドメイドカテゴリに飛べるようにしたいので、このように入力します↓

 

f:id:omitsublog:20181113123619j:plain

 

この状態で反映させると↓

 f:id:omitsublog:20181113123651j:plain

 

一番左が”ハンドメイド”になりました。クリックしたらちゃんとハンドメイドのカテゴリトップに飛びましたよ。

 

 

これを、自分がグローバルナビゲーションに入れたいだけ入れていくだけです。

私は他に ”ブログカスタマイズ” ”雑記” ”プライバシーポリシー” を作りました。

5つ入力できるようになってましたが、4つだけでよかったので行ごと消しました。増やしたい場合は行ごと増やせばいいと思います。

 

 

入力したものを反映させるとこうなりました↓

 

f:id:omitsublog:20181113145812j:image

 

ちゃんと反映はされました。が、文字が収まらず2行になってしまうのは嫌ですね…。

文字サイズをいじったりすればスッキリ収まるのかもと思って、やり方を探したんですが見つけられず、苦肉の策として名前を短く変更することにしました。

 

 

”ブログカスタマイズ”を”ブログカスタム”に、

”プライバシーポリシー”を”Privacy”に変更しました。


f:id:omitsublog:20181113123704j:image

 収まったーよかった!!完成です!

 おしゃれブログに一歩近づいたかな?

 

 

 

 

おみつ。