【保存版】はてなブログをカスタマイズ！まずは、この3つの設定をやればOK！誰でも簡単にできるよ。

はてなブログに乗り換えて、数日がたちました。
その中で、僕が行った作業をメモ。

使いやすさと見やすさと。
追い求めるなら、下記をご参考に！

■まずは「もくじ」を付ける！

よく見かける「もくじ」
意外とあっさり付けることができました。
これも、先人のおかげですねｗ
ありがとうございます。

<a href="http://hisoka02.hatenablog.com/entry/2015/04/21/100000">ブログに「目次」（もくじ）をつけるにはどうやるの？ - ひそかブログ</a>hisoka02.hatenablog.com

■「グローバルナビゲーション」を付ける！

Wordpressから、はてなブログに変えてちょっと不便だなと思ったのが、このグローバルナビの存在。
ブログをサイトっぽく見せれないというか、そのあたりどうしたもんかなぁと思ってたら。。。
やはり、先人の方々が対処済みですｗ
ありがとうございます。

とはいえ、私もHTML/CSSを書いてご飯食べてます。
簡易なものなら、さくっと書いてしまえば。。。
あっという間に、ナビゲーションの完成です。

いろいろ記事を見てたら、海外のサイトでCSSを吐き出してくれるサービスとかありますが、
最後に金払えー！とかいうアラートが出てくるので、諦めた所存です。
めんどくさいと思いながらも、自分でコーディングするのが一番ですね♪

ということで、簡単に手順説明！

ダッシュボード＞カスタマイズ＞ヘッダー

f:id:sitk:20150424092702p:plain

こちらに、ソースコードを挿入！

<div id="gnav">
<ul>
<li><a href="URL">Top</li>
<li><a href="URL">Note</li>
<li><a href="URL">Contact</li>
</ul>
</div>

ダッシュボード＞カスタマイズ＞デザインCSS

f:id:sitk:20150424091806p:plain

/*グローバルナビ*/
#gnav {
    padding:20px 0;
    text-align:center;
    border-bottom: 1px solid #e4e4e4;
}
#gnav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
#gnav ul li {
    display:inline-block;
    padding-left:10px;
    padding-right:10px;
    border-left:1px solid #e4e4e4;
}
#gnav ul li:first-child {
    border-left:none;
}