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

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

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

スポンサーリンク

宜しければ、読者登録、お願いしますm(_ _)m
 

 

どうも、あひるです。

当ブログは、はてなブログの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、さっぱりです。

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

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

他にも、ブログカスタマイズ系の記事を書いています。良ければ読んでみてください。

 

また、オススメのアイテムについても書いていますので、良ければ参考程度に。

 

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

 

 

 

 

ホームへ戻る