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

はてなブログのテーマ「tones」
http://blog.hatena.ne.jp/-/store/theme/17680117126967059287

はてなブログのテーマ「tones 3x」
http://blog.hatena.ne.jp/-/store/theme/17680117126976149009

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ずらす。

スポンサーリンク
コメント一覧
  • 名前:管理人 :

    コメントは、まだありません。