つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

はてなブログにグローバルメニュー(ナビゲーションバー)をつけてみよう

f:id:pea-nut:20180127115919p:plain

おすっ!つな(@tu_na_69)です(^_-)-☆ はてなブログにグローバルメニューを設置してみませんか。CSSをコピペして簡単にできる方法です。

グローバルメニューとは?

f:id:pea-nut:20180127105912p:plain

グローバルメニューとは、↑画像のピンクで囲んだ部分のことです。サイトの上部にあるカテゴリー名などを表示しているバーのことで、ナビゲーションバーともいいます。

リンクをクリックすると、カテゴリーの一覧ページを開き、お目当ての記事を見つけるのがより簡単になります。また、グローバルメニューに読んで欲しいカテゴリーを入れて、サイトの特徴をアピールすることもできます。

参考にさせてもらったのは、こちらのサイトです。 www.yukihy.com

コピペでOKのCSSを公開してくれていますので、初心者でも簡単にナビゲーションバーを設置することができます。

グローバルメニューのコードをコピペする

①コードをコピーする まずは、ゆきひーさんのサイトからコードをコピーさせていただきます。

②コードを貼り付けする ダッシュボードの「デザイン」→「カスタマイズ」(スパナのマーク)→「ヘッダ」→「タイトル下」にコードを貼り付けします。

③CSSコードをコピーする ゆきひーさんのサイトから、CSSコードをコピーさせていただきます。

④CSSコードを貼り付けする ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」にコードを貼り付けします。

⑤変更を保存する

ナビゲーションバーが設置できました。

グローバルナビのカスタマイズ

グローバルナビを、自分のサイトに合わせてカスタマイズしていきます。 当サイトでやってみたカスタマイズをメモしますね。 ゆきひーさんのページにカスタマイズの方法も書いてありますので、そちらを見ながらひとつひとつ確認作業をしながらゆっくりと進めてみたいと思います。

リンクをカスタマイズ

コードのカテゴリー名を変更して、リンクを挿入していきます。

「カテゴリ1」「カテゴリ2」「カテゴリ3」…の部分です。 ダッシュボードの「デザイン」→「カスタマイズ」(スパナのマーク)→「ヘッダ」→「タイトル下」に貼り付けたコードを開きます。

下の図の四角で囲んだ部分に「URL」という文字がありますので、それを削除して、リンクさせたいアドレスを入れます。 ピンクの下線の部分にグローバルナビに表示させたい文字を入れます。 「TOP」となっていましたが、わたしは「ホーム」に変えました。

f:id:pea-nut:20180127110627p:plain

「カテゴリ1」「カテゴリ2」「カテゴリ3」…の部分もそれぞれ好きな「カテゴリー名」を入れて、「URL」にそれぞれのカテゴリーのアドレスを入れればOKです。入力したら「変更を保存する」をクリックします。

ブログを開いて、グローバルナビにカテゴリー名が変更されていることとリンクが挿入されているか確認してみてください。

グローバルナビのリンクを均等にする

①コード20-21行目の「padding」を削除する

②コード17行目の「left」を「center」に書き換える

③コード17行目と18行目の間に、「width: ◯◯%;」を挿入する。  ◯◯は、「100÷リンクの個数」を入れます。ここではリンクが5個なので20と書き込みました。

④「変更を保存する」をクリックしてサイトを確認してください。

グローバルナビの色を変更する

サイトに合わせて、グローバルナビの色を変えることができます。

①コード6行目「グローバルメニュー背景色」の色コードを書き換えます。 ここでは「#40c040」にしました。

②コード23行目「グローバルメニュー文字色」の色コードを書き換えます。

背景に映ええるように黒系にチェンジ「#000000」にしました。

トグルメニューを上部に固定する

タブレットを使うことが多いので、こちらも設定しました。 ゆきひーさんのページを見ながらコードを挿入します。

①コード51行目と52行目の間にコードを挿入する。

②コード90行目と91行目にコードを挿入する。←一番下です

③「変更を保存する」をクリックして、タブレットを確認

グローバルメニューが完成

f:id:pea-nut:20180127115919p:plain

これでグローバルメニューが完成しました。 いい感じにできて満足です( *´艸`) スマートフォン、タブレットなどでも確認してみてください。

記事を紹介してくれたサイト

この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。

グローバルメニュー設置しました! - 林檎は木から落ちた