「Minimalism」ナビゲーションメニュー設置とカスタマイズのやり方2018-07-23「Minimalism」ナビゲーションメニュー設置とカスタマイズのやり方ブログデザインこんにちは。ブログのカスタマイズ、第6弾になります。ブログをはじめた当初は、カテゴリが揃い次第、ナビゲーションメニュー(グローバルナビ)を設置したいと考えていましたが、サイドバーにカテゴリ欄があるため、設置を後回しにしていました。スマホから見るとサイドバーは一番下に表示されるので不便です。設置した方がよいと思い直し、「ナビゲーションメニュー」を設置してみました。※設置した後は、パソコンでもサイドバーを使わなくなりました。いつものように先人のお知恵に頼りながら設定しました。以下が調べた結果になります。あなたの参考になれば幸いです。タイトル下にコピペナビゲーションメニューの背景色を変更するナビゲーションメニューの文字サイズを変更する終わりにおすすめ記事です。テーマ利用時にナビゲーションメニューの設置に必要な3ステップPoint紹介するコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。テーマの制作者「こどみす」さんの以下の記事を確認します。hitsuzi.hatenablog.com「ナビゲーションメニューを設置する」にあるサンプルコードをメモ帳などのテキストエディタにコピペします。サンプルコードのカスタマイズコピペしたコードを自分のブログ用に変更します。変更する箇所は、以下の色が付いている3箇所です。HOME</a></div>※改行されているかもしれませんが1行です。上記を1行追加するごとに、メニュー内の項目が右側に1つ増えます。テーマでは、標準でナビゲーションメニューがスライドします。そのため画面から見切れるほど追加しても大丈夫です。お勧めの項目ほど先に記載した方がよいとは思います。それでは変更する箇所について補足します。コピペしておいて、URLの文字列と置き換えます。ダブルクォーテーション(")は、そのままにします。私は各カテゴリのURLにしています。日本語でカテゴリ名を作成しているとURLが「%E6%97%A5%E6%9C%AC%E6%A0%AA%E5%BC%8F」のように(UTF-8でエンコードされるため)長くなりますが、そのままコピペして大丈夫です。日本語に修正(デコード)してコピペする必要はありません。aria-hidden="true">当ブログのように項目名の横にアイコンを利用する場合に指定します。自分のメニュー項目名に合ったアイコンを選びましょう。意外と時間が掛かりますので、ご注意ください。アイコンが不要な場合は、この青い部分を丸ごと削除します。Awesome」のバージョン4が使われています。私も今回はバージョン4を使用しました。現時点の最新は、バージョン5です。fa-home"の部分)がバージョンにより若干異なります。Awesome」アイコンの利用方法や注意点については、以下の記事で説明しています。お手数ですが、こちらを参照してください。www.inside-shiina.com注意点を紹介しています。www.inside-shiina.comHOMEメニュー内の項目名(カテゴリ名)です。自分用に修正してください。日本語でも大丈夫です。見ると先頭に半角スペースがあります。これはアイコンを利用する場合に、アイコンとの間隔調整のために挿入されています。タイトル下の最後にコピペし、[変更を保存する]をクリックして確定します。以上でナビゲーションメニューの設置は完了です。2018年9月9日に「Minimalism」テーマの微調整がありました。当ブログでは微調整前のテーマを利用しています。以降では、私が追加で設定したちょっとしたカスタマイズを紹介します。ナビゲーションメニューの背景色を変更するそのままでもよかったのですが、見やすいように背景色を変えたいと思いました。デザインCSSにコピペします。括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。以下をコピペしたら[変更を保存する]をクリックして確定します。#f5f5f5;}f5f5f5のような英数字部分で背景色を指定します。色の指定に使用する英数字(16進数)は、以下のサイトが非常にわかりやすいです。過去の記事でも利用しています。www.colordic.org単色でもよいですが、背景を斜線やストライプ柄にすることもできます。以下のサイトが非常に分かりやすく、コピペですぐに使えてよいと思います。エクセレント!blog.re-sta.com上記のサンプルコード部分の「background-image」以降をコピペします。以下のような感じです。7px;}いかがでしょうか。ちなみに上記は当ブログでの設定です。言われてみれば・・・・・・。いうレベルとは思います。私は気に入っていますが、色の組み合わせは、よく考えた方がよさそうです。ナビゲーションメニューの文字サイズを変更するより見やすくするために、文字サイズを大きくしたいと思います。設定する場所は、背景色を変えるときに設定した場所と同じです。デザインCSSにコピペします。括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。以下をコピペしたら[変更を保存する]をクリックして確定します。*/}いくつかの項目について補足します。700;「font-weight」を数値で指定する場合、100から900まで、100づつの9段階あります。一般的にフォントサイズは9段階も用意されていないようで、700以上にしないと違いが分からないと思います。キーワードで指定する場合は、以下の4種類があります。標準(400と同じ)bold:太字(700と同じ)lighter:上級者向け。相対的に一段階細くなりますbolder:上級者向け。相対的に一段階太くなりますletter-spacing:0px;文字の間隔(字間)です。メニュー項目毎の間隔ではなく、単語を構成する1字どうしの間隔です。通常は、0で問題ありません。終わりに最初に考えていたカスタマイズは完了したかなと思っています。今後はソーシャルボタンとか、利便性を考えて、ちょこちょこ変更していければと思います。私の場合、美的センスが残念ですので、やりすぎてデザインが崩れないように注意が必要です。