中卒フリーライターほぼ無職。

在宅Webフリーライターaoikaraの日常ブログです。

スポンサーリンク

ブログのメニューを追加!グローバルナビゲーションをカスタマイズしてみた

スポンサーリンク

f:id:aoikara:20170124154401p:plain

※2017/2/4 追記しました

ブログのカスタマイズは楽しいけど、ど素人なのでエラーが起きたら大号泣もののaoikaraです。ひとつひとつこまかーく見ていくしか直す方法はないですね。時間ができたら基本的なことを学ぶのも良いかもしれません。

 

というわけで今回のテーマはそんなブログのカスタマイズのひとつ…

 

グローバルナビゲーションのカスタマイズ方法

 

についてです。

 グローバルナビゲーションって何?

サイトの「メニュー」=案内リンク

そもそもグローバルナビゲーションって何ですか?という方へ、簡単に解説するとサイトの上にある「メニュー」のこと。サイトの案内リンクとなっています。

f:id:aoikara:20170116205317p:plain

 このブログで言うとこの赤枠でくくった部分。記事のカテゴリを整理して、見やすくわかりやすくすることができます。

 

f:id:aoikara:20170116205448p:plain

 グローバルナビゲーションだけを表示すると、こんな感じ。クリックすることでそのカテゴリの記事に飛ぶことができます。初めてブログに訪れた人でもわかりやすいですよね。

 

そんなグローバルナビゲーションの設置の仕方や、カスタマイズのやり方をご紹介します。実践型プロデュースです!

 

ゆきひーさんのグローバルメニューを参考にしました!

グローバルナビゲーション=グローバルメニューはゆきひーさんの記事を参考にさせていただきました。

 

www.yukihy.com

選んだ理由としては4つあります。

 

理由1:説明がわかりやすかった

どこに何を設置したら良いのか、何を変更しなければならないのか、とてもわかりやすかったです。コードに番号が振ってあったり、日本語で表記してあったりと、配慮が素晴らしい!

 

実際にカスタマイズするときに、超初心者の私でもきちんと理解できました。

 

理由2:ドロップダウンメニューにできる

メニューはドロップダウンにしたかったんですよね。ドロップダウンメニューというのは…

f:id:aoikara:20170116213813p:plain

 こんな風にメニューにマウスをかざすと、下にサブカテゴリが表示される形になること。細かく分類したかったので助かりました。

 

※実は孫カテゴリ(サブカテゴリをさらにドロップダウン)を追加できる方法を探しています!情報がある方はブログまでお寄せください。よろしくお願いいたします。

追記しました!

 

理由3:スマホも対応している

こちらのメニューはスマホにも対応しているのが素晴らしい!ちなみにレスポンシブ対応の場合のみだそうです。レスポンシブ対応について知りたい人はこちらまで。

 

実装図はこんな感じです。

 

f:id:aoikara:20170116213155p:plain

 

みょーんと縦伸び!スマホでもメニューが見られます。

 

※ただし、タップしてからすぐに見えなくなってしまう!これをキープしたいのですがうまい対処法が見当たりません。こちらも知っている方がいたら情報提供よろしくお願いいたします!

 

理由4:カスタマイズの方法まで丁寧

色の替え方、幅の変え方、固定したい場合、などカスタマイズもとても丁寧に書かれています。初心者にとっては本当にありがたいです!

 

というわけで、コードなどについてはゆきひーさんのサイトを見ていただくとして、基本的なことをご紹介します。

 

グローバルメニューの設置方法

「デザイン」>「スパナ」>「デザインCSS」にコードを入力

 グローバルメニューを設置するためには2つの場所にコードを入力する必要があります。1つ目は「デザインCSS」。入力の仕方をご紹介します。

 

まずブログのメニューから「デザイン」を選択しましょう。

f:id:aoikara:20170116212952p:plain

 次に左側に表示される3つのマークのメニューから、真ん中の「スパナ」のようなマークを選択します。

f:id:aoikara:20170116213000p:plain

 するとさまざまな設定が表示されるはずです。そのなかの一番下の「デザインCSS」をクリックすると、入力する欄が表示されます。

f:id:aoikara:20170116213112p:plain

 ここに、先ほどご紹介したゆきひーさんのサイトのコードを入力しましょう。

 

「デザイン」>「スパナ」>「ヘッダ」>「タイトル下」にHTMLコードを入力

コードを入力する2つ目の場所は「タイトル下」です。まず、先ほどと同じようにブログメニューから「デザイン」を選択しましょう。

f:id:aoikara:20170116212844p:plain

先ほどと同じように「スパナ」マークをクリック。

f:id:aoikara:20170116212858p:plain

今度は上から3番目の「ヘッダ」を選択します。

f:id:aoikara:20170116212923p:plain

 するといろいろな項目が表示されるでしょう。そのなかから「タイトル下」の下の欄をクリック。

f:id:aoikara:20170116212935p:plain

 ここにゆきひーさんのサイトのコードを入力します。

 

すると、最初はこんな風に表示されるはずです。

f:id:aoikara:20170116215413p:plain

 

グローバルナビゲーションだけ表示するとこんな感じ。

f:id:aoikara:20170116215438p:plain

 

ここから…

f:id:aoikara:20170116215454p:plain

 これにするための、aoikaraオリジナルカスタマイズをご紹介します。

 

aoikaraオリジナルカスタマイズ1:カテゴリ名の変更

「カテゴリ1」「カテゴリ2」となっている部分を、自分なりに変更しました。これはヘッダのタイトル下に入力するコードを変更することでできます。詳しくはゆきひーさんのサイトをご覧ください。

 

aoikaraオリジナルカスタマイズ2:カラーを変更

グローバルナビゲーションのバーの色が、グレーから青色に変わっています。これはデザインCSSに入力したコードのなかでも、「#〇〇〇」と表示されているカラーコードを変更したからです。その方法もチェック!

 

デザインCSSのカラーコードを変える

 デザインCSSはここです!

f:id:aoikara:20170116213233p:plain

 

私はこんな風に色を変換しました。

  • ①バーの色:#444→#129b98
  • ②マウスをかざしたときの色:#555→#4CC4C1

 実際にグローバルメニューのどこのことを指しているのかというと…

f:id:aoikara:20170116213729p:plain

何もしていない状態のバーの色と、マウスをかざすと少し透けたような色になるので、この2つのカラーコードを変えました。

 

ただし、1つ1つカラーコードがどこにあるのかを探して、自分好みのカラーコードを入れて…って作業はかなり面倒です。そこでメモ帳を使って簡単にカラーコードを変換する方法をご紹介します。

 

テキスト ドキュメント(メモ帳)を使った簡単なカラーコード変換方法

ちなみにカラーコードはこちらを参考にしました。自分好みの色を見つけてくださいね。

www.colordic.org

 

1.デザインCSSに貼るコードをメモ帳にコピー・ペーストする

ゆきひーさんのサイトからデザインCSSに貼るコードをコピーして、メモ帳(テキスト)にペーストしましょう。

f:id:aoikara:20170116213934p:plain

こんな風に表示されるはずです。

 

2.「編集」>「置換」を洗濯する

メモ帳の上にあるメニューバーの中で、左から二番目にある「編集」を選択します。その中から「置換」をクリックしましょう。

f:id:aoikara:20170116214058p:plain

 すると、こんな画面が表示されるはずです。

f:id:aoikara:20170116214134p:plain

 

 

 3.「検索したい文字列」に元のカラーコードを、「置換後の文字列」に自分がカスタマイズしたい色のカラーコードを入力する

ここにカラーコードを入力することによって、変換されます。まずは「①バーの色」の変更方法から。

 

f:id:aoikara:20170116214413p:plain

上側の「検索したい文字列」には元のカラーコードを入力します。つまり「#444」。下側の「置換後の文字列」には自分がカスタマイズしたい色を入力します。私は「#129b98」 と入力しました。こんな色です。

 

f:id:aoikara:20170124153033p:plain

 

 4.「すべて置換」をクリック

カラーコードを入力したら「すべて置換」をクリックします。

f:id:aoikara:20170116214458p:plain

この作業をすることで「#444」というカラーコードが「#129b98」に変換されて、バーの色がグレーから青色に変わります。

 

同じように「②マウスをかざしたときの色」も変換しましょう。

f:id:aoikara:20170116214317p:plain

「検索する文字列」には「#555」。「置換後の文字列」 には「#4CC4C1」を入力。先ほどと同じように「すべて置換」をクリックすれば、マウスをかざしたときのカラーコードも変更されているでしょう。

 

ヘッダー画像下の隙間をなくす方法

これで完了なのですが、ひとつ気になることがあります。実はこのままだとヘッダ画像とグローバルナビゲーションの間にちょっと隙間があいてしまいます。こんな感じに。

f:id:aoikara:20170124153434p:plain

この直し方について id:syofuso さんに下記の記事のコメントでご教授いただきました。

 

www.aoikara-writer.com

#menu {
width: 100%;
margin: 10px auto;
background: #129b98;
}
となっているところを
#menu {
width: 100%;
margin: 0 auto;
background: #129b98;
}
に変えると隙間がなくなりますよ。

はまさか日記~澄風荘しょうふうそう~

 

デザインCSSのコードの一部を変更すると良いそうです。さらにわかりやすく、詳しい隙間のなくしかたはid:syofusoさんのブログ記事に書かれています。

 

design.syofuso.com

です。参考にしましょう。

 

追記:3階層目まで作る方法を教えていただきました!

このブログのコメント欄でid:syofusoさんに、3階層目までメニューを作る方法を教えていただきました。本当にいつもありがとうございます。

 

design.syofuso.com

こちらの記事を参考にいたしました。その結果…

f:id:aoikara:20170204161144p:plain

やったー3階層目まできちんとメニューが作れた!さらに、以前と比べて字のサイズも少し大きくしました。

 

Before

f:id:aoikara:20170204160956p:plain

 

After

f:id:aoikara:20170204161005p:plain

 

字は大きい方が見やすいですからね。あとは、自分用に色や字のサイズを変更しました。

  • font-size: 80%;→font-size: 75%;
  • #47a89c→#129b98
  • #3f968b→#11a3a0
  • #95C7A4→#4CC4C1

実際のコードの変更はこんな感じ。80%まで字を大きくしてしまうと、Chromeでメニューが崩れてしまうので、ちょっと小さめ。でも以前よりは大きめの75%に。

 

あまりやりすぎると見づらいとのことなので、ほどほどにしておきます。本当にいつもありがとうございます!

 

以上です。コードなど全くわからないど素人の私でもなんとかできました。はてなブログをカスタマイズしたいと思った方には、少し参考になるかもしれません。参考にさせていただいた方々、本当にありがとうございました!

 

良かったらポチッとください。
励みになります!

 

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


フリーライター ブログランキングへ

 

aoikara

 

▼お仕事のご依頼はこちらから

保存

保存

保存

保存

スポンサーリンク