こんにちは。シーナと申します。
ブログのカスタマイズ、第6弾になります。
ブログをはじめた当初は、カテゴリが揃い次第、ナビゲーションメニュー（グローバルナビ）を設置したいと考えていましたが、サイドバーにカテゴリ欄があるため、設置を後回しにしていました。
しかし、スマホから見るとサイドバーは一番下に表示されるので不便です。
やはり設置した方がよいと思い直し、「ナビゲーションメニュー」を設置してみました。
※設置した後は、パソコンでもサイドバーを使わなくなりました。
いつものように先人のお知恵に頼りながら設定しました。
以下が調べた結果になります。少しでもあなたの参考になれば幸いです。
- Minimalism テーマ利用時にナビゲーションメニューの設置に必要な3ステップ
- ナビゲーションメニューの背景色を変更する
- ナビゲーションメニューの文字サイズを変更する
- 終わりに
- おすすめ記事です。
Minimalism テーマ利用時にナビゲーションメニューの設置に必要な3ステップ
紹介するコードをコピペする前にすでに追加しているコードのバックアップ（どこかにコピペ）を取っておくことをお勧めします。
ステップ1 事前準備
まずは、Minimalism テーマの制作者「こどみす」さんの以下の記事を確認します。
「ナビゲーションメニューを設置する」にあるサンプルコードをメモ帳などの
テキストエディタにコピペします。
ステップ2 サンプルコードのカスタマイズ
コピペしたコードを自分のブログ用に変更します。
変更する箇所は、以下の色が付いている3箇所です。
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
※改行されているかもしれませんが1行です。
上記を1行追加するごとに、メニュー内の項目が右側に1つ増えます。
Minimalism テーマでは、標準でナビゲーションメニューがスライドします。
そのため画面から見切れるほど追加しても大丈夫です。
お勧めの項目ほど先に記載した方がよいとは思います。
それでは変更する箇所について補足します。
URL
表示させたいページの URL をコピペしておいて、URLの文字列と置き換えます。
ダブルクォーテーション（"）は、そのままにします。
私は各カテゴリのURLにしています。
なお、日本語でカテゴリ名を作成しているとURLが
「%E6%97%A5%E6%9C%AC%E6%A0%AA%E5%BC%8F」
のように（UTF-8でエンコードされるため）長くなりますが、
そのままコピペして大丈夫です。
日本語に修正（デコード）してコピペする必要はありません。
<i class="fa fa-home" aria-hidden="true">
当ブログのように項目名の横にアイコンを利用する場合に指定します。
自分のメニュー項目名に合ったアイコンを選びましょう。
意外と時間が掛かりますので、ご注意ください。
アイコンが不要な場合は、この青い部分を丸ごと削除します。
「こどみす」さんのサンプルコードでは、「Font Awesome」のバージョン4が使われています。
私も今回はバージョン4を使用しました。
現時点の最新は、バージョン5です。
指定する際の書式（"fa fa-home"の部分）がバージョンにより若干異なります。
「Font Awesome」アイコンの利用方法や注意点については、以下の記事で説明しています。お手数ですが、こちらを参照してください。
注意点を紹介しています。
HOME
メニュー内の項目名（カテゴリ名）です。
自分用に修正してください。もちろん日本語でも大丈夫です。
なお、よく見ると先頭に半角スペースがあります。
これはアイコンを利用する場合に、アイコンとの間隔調整のために挿入されています。
ステップ3 デザイン => カスタマイズ => ヘッダ => タイトル下にコピペ
ステップ2で修正が完了したコードを
デザイン => カスタマイズ => ヘッダ => タイトル下
の最後にコピペし、［変更を保存する］をクリックして確定します。
以上でナビゲーションメニューの設置は完了です。
いかがでしょうか。
※2018年9月12日追記ーーーーーー
2018年9月9日に「Minimalism」テーマの微調整がありました。
当ブログでは微調整前のテーマを利用しています。
ーーーーー追記ここまでーーーーー
以降では、私が追加で設定したちょっとしたカスタマイズを紹介します。
ナビゲーションメニューの背景色を変更する
そのままでもよかったのですが、見やすいように背景色を変えたいと思いました。
背景色を変えるには、以下のコードを
デザイン => カスタマイズ => デザインCSS
にコピペします。
/* */ で括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。
以下をコピペしたら［変更を保存する］をクリックして確定します。
/*ナビゲーションメニュー背景色*/
#gnav{
background: #f5f5f5;
}
f5f5f5のような英数字部分で背景色を指定します。
色の指定に使用する英数字（16進数）は、以下のサイトが非常にわかりやすいです。
過去の記事でも利用しています。
単色でもよいですが、背景を斜線やストライプ柄にすることもできます。
以下のサイトが非常に分かりやすく、コピペですぐに使えてよいと思います。
エクセレント！
上記のサンプルコード部分の「background-image」以降をコピペします。
例えば、以下のような感じです。
#gnav{
background: #f5f5f5;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
}
いかがでしょうか。
ちなみに上記は当ブログでの設定です。
言われてみれば・・・・・・。
というレベルとは思います。
私は気に入っていますが、色の組み合わせは、よく考えた方がよさそうです。
ナビゲーションメニューの文字サイズを変更する
より見やすくするために、文字サイズを大きくしたいと思います。
設定する場所は、背景色を変えるときに設定した場所と同じです。
以下のコードを参考に適時変更して
デザイン => カスタマイズ => デザインCSS
にコピペします。
/* */ で括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。
以下をコピペしたら［変更を保存する］をクリックして確定します。
/*ナビゲーションメニュー文字サイズ*/
#gnav .menu a {
display: block;
font-size: 15px; /* サイズ */
font-weight: 700; /* 太さ */
text-decoration:none;
padding: 11px 9px 0px;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
letter-spacing:0px; /* 1字の間隔 */
}
いくつかの項目について補足します。
font-weight: 700;
「font-weight」を数値で指定する場合、100から900まで、100づつの9段階あります。
ただ、一般的にフォントサイズは9段階も用意されていないようで、700以上にしないと違いが分からないと思います。
単に太字にするには、bold と指定します。
キーワードで指定する場合は、以下の4種類があります。
normal： 標準（400と同じ）
bold：太字（700と同じ）
lighter：上級者向け。相対的に一段階細くなります
bolder：上級者向け。相対的に一段階太くなります
letter-spacing:0px;
文字の間隔（字間）です。
メニュー項目毎の間隔ではなく、単語を構成する1字どうしの間隔です。
通常は、0で問題ありません。
調整する際は、0.05～0.1 ぐらいがお勧めです。
終わりに
最初に考えていたカスタマイズは完了したかなと思っています。
今後はソーシャルボタンとか、利便性を考えて、ちょこちょこ変更していければと思います。
私の場合、美的センスが残念ですので、やりすぎてデザインが崩れないように注意が必要です。
それでは、また。
おすすめ記事です。
ブログ更新のお供に体重に優しい飲み物はいかがでしょうか。
おやつもあります。特にラスクはおすすめです。
普段の商品選択の参考になれば幸いです。
おいしく食べた後はお口のお手入れも忘れずに行いたいです。
通信費削減のために自宅のネット回線を楽天モバイル（モバイルルーター代わり）にするという選択肢はありですよ。
ブログ更新のお供にYouTubeはいかがでしょうか。
作業用に雑談がおすすめです。
素晴らしい音楽もあります。
食事ネタ多めの森羅万象日常系ギャグ漫画です。
日常系ギャグ漫画の古典にして名作です。約30年ぶりの新刊も今年発売しています。
大号泣間違いなしの名作テニス漫画です。劇場版アニメもおすすめです。
