【tones】グローバルメニューを追加する【hatenablog】

HTMLの追加

<nav itemscope="" itemtype="http://schema.org/SiteNavigationElement">
<div id="gnav" class="gnav-container">
<ul id="menu-scroll" class="gnav-inner">
<li class="menu"><a itemprop="url" href="/"><span itemprop="name">ホーム</span></a></li>
<li class="menu"><a itemprop="url" href="カテゴリURL01"><span itemprop="name">カテゴリ01</span></a></li>
<li class="menu"><a itemprop="url" href="カテゴリURL02"><span itemprop="name">カテゴリ02</span></a></li>
<li class="menu"><a itemprop="url" href="/archive"><span itemprop="name">アーカイブ</span></a></li>
</ul>
</div>
</nav>

「デザイン」＝＞「カスタマイズ」＝＞「ヘッダー」＝＞「タイトル下」に上記をコピペしてください。

tonesテーマの中で、グローバルメニューCSSが定義されてるのでメニュー形式で表示されるかと思います。

CSSをカスタマイズする

色関係

/*メニューに色を付ける*/
#gnav .gnav-inner {
  background: #313131;
}
/*メニューの文字色を変更する*/
#gnav .gnav-inner .menu a {
  color: #fff;
}

「デザイン」＝＞「カスタマイズ」＝＞ 「デザインCSS」に上記を追加してください。

位置関係

#gnav .gnav-inner {
   margin-top: 10px;
}

グローバルメニューの位置は下のほうに10pxずらず。（上に、10pxの空白を入れる）

#gnav .gnav-inner {
   margin-top: 10px;
}

グローバルメニューの位置は下のほうに10pxずらす。（上に、10pxの空白を入れる）

@media (min-width: 900px){
 #gnav .gnav-inner {
    margin-top: 10px;
 }
}

横幅が900pxの時だけ、10pxずらす。