読者です 読者をやめる 読者になる 読者になる

/var/log/messages from Tocyuki

IT / MUSIC / BJJ / LIFE / GROUMENT

成功者のみが知っているはてなブログのグローバルナビゲーション設置方法、5選

ブログカスタマイズ プログラミング テクノロジー

タイトルは釣りです。

元ネタはこちら

manato-kumagai.hatenablog.jp

グローバルナビゲーション

グローバルナビゲーションとは、Webサイトの全てのページに共通して設置された案内リンクを指します。 会社概要やサービス紹介などWebサイト内の主要なページに対してリンクされ、Webサイト内のショートカット機能として活用することが一般的です。

www.seohacks.net

というわけで、ブログテーマも変更してみたことだしグローバルナビゲーションなるものを設置してみました。

ちなみに使っているブログテーマはこちら

design.syofuso.com

と言ってもほぼコピペなのでよろしくね!

グローバルナビゲーション設置手順

1. HTMLの作成

<ul id="nav-menu">
<li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i>IT</a>
  <ul>
    <li><a href="http://tocc.hatenablog.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a></li>
    <li><a href="http://tocc.hatenablog.com/archive/category/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9">インフラ</a></li>
    <li><a href="http://tocc.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</a></li>
    <li><a href="http://tocc.hatenablog.com/archive/category/%E3%81%9D%E3%81%AE%E4%BB%96IT%E7%B3%BB">その他IT系</a></li>
  </ul>
</li>
<li><a href="#"><i class="fa fa-music" aria-hidden="true"></i>MUSIC</a></li>
<li><a href="http://tocc.hatenablog.com/archive/category/%E6%9F%94%E8%A1%93"><i class="fa fa-hand-rock-o" aria-hidden="true"></i>BJJ</a></li>
<li><a href="http://tocc.hatenablog.com/archive/category/%E6%97%A5%E5%B8%B8"><i class="fa fa-child" aria-hidden="true"></i>LIFE</a></li>
<li><a href="http://tocc.hatenablog.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1"><i class="fa fa-cutlery" aria-hidden="true"></i>GROUMENT</a></li>
</ul>

2. 設置したHTMLの適用

以下のような画面遷移でHTMLの適用箇所までたどり着きます。

2.1 ダッシュボードから「デザイン」をクリック

f:id:tocguitar1:20161201153543p:plain

2.2 「カスタマイズアイコン」をクリック

f:id:tocguitar1:20161201153725p:plain

2.3 「ヘッダ」クリック

f:id:tocguitar1:20161201153913p:plain

2.4 赤枠内に先程作成したHTMLを記述し、設定を保存する

f:id:tocguitar1:20161201154121p:plain

3. Fontawesomeを使う

Fontawesomeを使いたいのでCDN経由で読み込みます。

fontawesome.io

3.1 ダッシュボードから「設定」をクリック

f:id:tocguitar1:20161201160156p:plain

3.2 右ペインの「詳細設定」をクリック

f:id:tocguitar1:20161201160337p:plain

3.3 画面をスクロールし、「headに要素を追加」の箇所に一行コードを記載する

f:id:tocguitar1:20161201160541p:plain

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

4. CSSの適用

そのままだとFontawesomeのアイコンが文字と近いので、その部分だけCSSで調整! 適用箇所はHTMLの適用箇所とほぼおなじで「デザインCSS」内に下記過コードを記述する。

.fa {
    margin-right: 5px;
}

やることはこれだけ!

おわりに

そんなこんなで簡単にグローバルナビゲーションを設置することができました。

ただ、色々とスマホ対応していない等の課題はあるので、今後改善していければと思っております!

しかし、ブログのカスタマイズ初めてやってみたのですが、画面UIがイジリづらくて結構面倒くさかった。
やり方が悪いのかな?他にもやり方があるとか・・・?

一応、ナビゲーション設置前、設置後の画像を!

設置前

f:id:tocguitar1:20161201161322p:plain

設置後

f:id:tocguitar1:20161201161338p:plain

参考

今回参考にさせて頂いたサイトです!

stripe - テーマ ストア

design.syofuso.com