つなろっく

イロトリドリな毎日

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

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

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

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

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

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

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

まずはテーマを確認

テーマによっては、コードをコピペするだけでナビゲーションバーが簡単に設置できるようにはじめから準備してくれているテーマもあります。 まずはお使いのテーマのカスタマイズページなど確認してみてください。 それぞれのテーマをインストールしたページに記載されていると思います。 はてなブログの公式テーマではナビゲーションバーが装備されていませんが、以下の方法で設置することができます。

ナビゲーションバーのコードをコピペする

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

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

①HTMLコードをコピーする

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

②HTMLコードを貼り付けする

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

③CSSコードをコピーする

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

④CSSコードを貼り付けする

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

⑤変更を保存する

ナビゲーションバーが設置できました。このままでは、また不十分です。

ナビゲーションバーのカスタマイズ

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

リンクをカスタマイズ

コピペしたコードそのままでは、ページへのリンクがない状態です。 コードのカテゴリー名を変更して、リンクを挿入していきます。

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

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

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

「カテゴリ1」「カテゴリ2」「カテゴリ3」…の部分もそれぞれ好きな「カテゴリー名」を入力して、「URL」にそれぞれのカテゴリーのアドレスを入れればOKです。 カテゴリーのURLは、サイドバーや記事内のカテゴリー名をクリックして開いたカテゴリー一覧ページのURLになります。 それをコピペします。 「変更を保存する」をクリックして完了です。

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

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

①コード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

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

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

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

【ブログ運営】グローバルメニュー・トグルメニュー設置に挑戦しました!^^ - おしょぶ~のワードプレスブログ挑戦記! ≪ブログ2ケ月目≫ ブログ初心者がナビゲーションメニューをつけてみた。 - いつもの暮らしに+αの小遣いを プログラミング初心者が3時間でサイトを作った手順 - パクチーとみたの備忘録 開設1か月ではてな読者175人!デザインはこれだけやればOK! - 瞑想Hack 祝!? グローバルメニュー設置しました~!! - まえがみばっつん グローバルメニュー設置しました! - 林檎は木から落ちた ブログのプチ・カスタマイズ。惜しげなく貴重な情報を提供くださる先輩方にただただ感謝。 - 40代新米パパの育児休業日記