どうも、あひるです。
当ブログは、はてなブログのMinimalismというテーマを使用しています。
色々とカスタマイズを行ってきましたので、ここら辺で、忘備録がてら、まとめていこうと思います。
ちなみに、私は、プログラミングやそれに関することは、全くの初心者です。
全然わかりません。
htmlだとか、cssだとかさっぱりの人間です。
そんな私でもできたのですから、読者の皆様でも簡単にできるかと思います。
今回は、その第一弾、
グローバルメニューの設置方法
についてです。
グローバルメニューとは？
グローバルメニュー、別名、ナビゲーションメニューとも呼ばれていますね。
ブログタイトルの下（ヘッダー）に設置するものです。
別にないからどうこう言うことはないですが、あればそれなりに便利です。
トップページへボタン一つで帰れたり、
ブログ運営者がオススメするページへ誘導してくれたり、
などなど。
当ブログでも、グローバルメニューは取り入れており、
当ブログのメインとするカテゴリーに簡単に飛べるようにしています。
Font Awesomeとは
アイコンですね。
もっとわかりやすい言い方ですと、絵文字でしょうか。
当ブログのグローバルメニューや、サイドバーにFont Awesomeを使用しています。
Font Awesomeを使用するにあたり、いくつか設定をする必要があります。
手順1：以下のコードをコピー
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
上記で囲まれている部分すべてをコピーしてください。
手順2：コードの貼り付け
はてなブログの場合、
設定 ⇒ 詳細設定 ⇒ headに要素を追加
そこに上記でコピーしたコードを貼り付ければOK！
アイコンの大きさ、色、アニメーションなども可能です。
詳しくは、こちらのサイトを参照してみてください。
かなり詳しく書かれてあります。
グローバルメニューの設置方法
手順1：コードの準備
初期のコードは、下記サイトからでも確認できます。
<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なら、家のアイコンになります。
好みのアイコンは、下記サイトからコードが取得可能です。
緑文字の部分は、お好きな文字、飛ぶページをわかりやすく表す文字が良いかと思います。
また、メニューの数が多いって場合は、数を減らすことも可能です。
手順2：コードの貼り付け
上記で調整したコードの貼り付け場所は、下記の通りです。
デザイン ⇒ カスタマイズ ⇒ ヘッダ ⇒ タイトル下
にコードを貼り付ければ、完了です。
しっかり、「変更を保存する」をクリックして、変更を確定させてくださいね。
グローバルメニューの背景色の変更
グローバルメニューは、背景色を変えることも可能です。
コードを貼る場所は、
デザイン ⇒ カスタマイズ ⇒ デザインCSS
背景色を変えるには、以下のコードを使用します。
/*グローバルメニュー背景色*/
#gnav{
background: #f5f5f5;
border-top: 2px solid #f5f5f5;
border-bottom: 2px solid #f5f5f5;}
boder-top、boder-bottomは、グローバルメニューの上の線、下の線のこと。
ここの色を変更するつもりがなければ、コードを設置する必要はありません。
その辺りはご自由に！です。
/**/で囲うと、cssに繁栄されない形となります。
今後cssをたくさん追加していくでしょうし、どれがどのcssだったかわからなくなることを防ぐためにも、/**/でなんのcssなのか、わかるようにしておいた方が良いです。
赤字の部分は、自由に変えてください。
カラーコードと呼ばれるものです。
カラーコードは、下記のサイトから取得できます。
ちなみに、色を変える必要がなければ、このコードを貼り付ける必要は一切ありません。
グローバルメニューの文字の大きさの変更
文字大きさも変更できます。
コードを貼る場所は、
デザイン ⇒ カスタマイズ ⇒ デザイン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、さっぱりです。
そんな私でもできたのですから、これを読んでいただければ簡単かと。
自分好みのカスタマイズを楽しみましょう！
他にも、ブログカスタマイズ系の記事を書いています。良ければ読んでみてください。
【はてなブログカスタマイズ】文字サイズ変更、マーカー、見出しの変更方法
【はてなブログカスタマイズ】ボックスデザイン、ボタンの設置方法
【Minimalismカスタマイズ】サイドバーの色変更、アイコンの設置
【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方
また、オススメのアイテムについても書いていますので、良ければ参考程度に。
最後までお読みいただき、ありがとうございます。