あひるの化粧品と戯れる日記

化粧品開発者が化粧品やそれに関する知識、情報などを発信していくブログです。たまに無関係なことも書きます。

【Minimalismカスタマイズ】グローバルメニューの設置方法

スポンサーリンク

 

どうも、あひるです。

当ブログは、はてなブログのMinimalismというテーマを使用しています。

hitsuzi.hatenablog.com

色々とカスタマイズを行ってきましたので、ここら辺で、忘備録がてら、まとめていこうと思います。

ちなみに、あひるは、プログラミングやそれに関することは、全くの初心者です。

全然わかりません。

htmlだとか、cssだとかさっぱりの人間です。

そんな私でもできたのですから、読者の皆様でも簡単にできるかと思います。

 

今回は、その第一弾、

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

についてです。

 

 

 

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

グローバルメニュー、別名、ナビゲーションメニューとも呼ばれていますね。

ブログタイトルの下(ヘッダー)に設置するものです。

別にないからどうこう言うことはないですが、あればそれなりに便利です。

トップページへボタン一つで帰れたり、

ブログ運営者がオススメするページへ誘導してくれたり、

などなど。

当ブログでも、グローバルメニューは取り入れており、

当ブログのメインとするカテゴリーに簡単に飛べるようにしています。

 

 

Font Awesomeとは

アイコンですね。

もっとわかりやすい言い方ですと、絵文字でしょうか。

当ブログのグローバルメニューや、サイドバーにFont Awesomeを使用しています。

fontawesome.io

Font Awesomeを使用するにあたり、いくつか設定をする必要があります。

 

手順1:以下のコードをコピー
Font Awesomeのコード

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

上記で囲まれている部分すべてをコピーしてください。

 

手順2:コードの貼り付け

はてなブログの場合、

設定 ⇒ 詳細設定 ⇒ headに要素を追加

そこに上記でコピーしたコードを貼り付ければOK!

 

アイコンの大きさ、色、アニメーションなども可能です。

詳しくは、こちらのサイトを参照してみてください。

かなり詳しく書かれてあります。

saruwakakun.com

 

 

 

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

手順1:コードの準備

初期のコードは、下記サイトからでも確認できます。

hitsuzi.hatenablog.com

 

グローバルメニューのコード

              <nav id="gnav">

              <div class="gnav-inner" id="menu-scroll">

                            <div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>

    <div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>

    <div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>

    <div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>

    <div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>

    <div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>

              </div>

</nav>

赤字部分は、ご自身のブログURLで、かつ、ご自身が表示させたいURLを入力してください。

""はなくさないでくださいね。

例えば、記事を表示させたければ、記事URLを、

カテゴリーを表示させたければ、カテゴリーURLを記入してください。

青字部分は、Font Awesomeからのアイコンコードです。

fa fa-homeなら、家のアイコンになります。

好みのアイコンは、下記サイトからコードが取得可能です。

fontawesome.io

緑文字の部分は、お好きな文字、飛ぶページをわかりやすく表す文字が良いかと思います。

また、メニューの数が多いって場合は、数を減らすことも可能です。

 

手順2:コードの貼り付け

上記で調整したコードの貼り付け場所は、下記の通りです。

デザイン ⇒ カスタマイズ ⇒ ヘッダ ⇒ タイトル下

にコードを貼り付ければ、完了です。

しっかり、「変更を保存する」をクリックして、変更を確定させてくださいね。

 

 

グローバルメニューの背景色の変更

グローバルメニューは、背景色を変えることも可能です。

コードを貼る場所は、

デザイン ⇒ カスタマイズ ⇒ デザインCSS

背景色を変えるには、以下のコードを使用します。

背景色の変更コード

/*グローバルメニュー背景色*/

#gnav{

background: #f5f5f5;

border-top: 2px solid #f5f5f5;
border-bottom: 2px solid #f5f5f5;

}

boder-top、boder-bottomは、グローバルメニューの上の線、下の線のこと。

ここの色を変更するつもりがなければ、コードを設置する必要はありません。

その辺りはご自由に!です。

/**/で囲うと、cssに繁栄されない形となります。

今後cssをたくさん追加していくでしょうし、どれがどのcssだったかわからなくなることを防ぐためにも、/**/でなんのcssなのか、わかるようにしておいた方が良いです。

赤字の部分は、自由に変えてください。

カラーコードと呼ばれるものです。

カラーコードは、下記のサイトから取得できます。

www.colordic.org

ちなみに、色を変える必要がなければ、このコードを貼り付ける必要は一切ありません。

 

 

 

グローバルメニューの文字の大きさの変更

文字大きさも変更できます。

コードを貼る場所は、

デザイン ⇒ カスタマイズ ⇒ デザイン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字の間隔 */
}

15pxの数字を変更すれば、文字サイズも変更できます。

当然、数字が大きい方が、大きくなります。

こちらも、変える必要がなければ、貼り付けなくても何ら問題ありません。

 

 

 

最後に

グローバルメニューの設置方法について、書いてみました。

そんなに難しくはないかと思います。

冒頭でもお話しましたが、プログラミングは一切わかりません。

html、css、さっぱりです。

そんな私でもできたのですから、これを読んでいただければ簡単かと。

自分好みのカスタマイズを楽しみましょう!

 

最後までお読みいただき、ありがとうございます。

 

 

 

ホームへ戻る