公開したテーマに使えるヘッダーメニューを作りました - SPARKCLIP

気が向いたらやるやる詐欺していたので…。
自分が作ったテーマに使えるヘッダーメニューをこっそりデザインしておきました。

PC版デザイン
タブレット/スマートフォン版デザイン
ソース

PC版デザイン

タブレット/スマートフォン版デザイン

ソース

イメージ画像の水色に発光している部分はマウス乗せた時のイメージです。

一応、当方が公開しているテーマ２種どちらにも使えるようになっていますので、使ってみたい方は以下にソースをペタッと貼ってください。

デザイン → カスタマイズ → ヘッダ → タイトル下

項目名（item name）とリンク先は適宜ご自分で設定してくださいね。
たぶん４〜６項目くらいだと良い感じの見栄えになるんじゃないかな、と思います。

<div id="header-navigate">
    <ul id="header-navi-menu">
        <li><a href="リンク先">項目名<br><span>item name</span></a></li>
        <li><a href="リンク先">項目名<br><span>item name</span></a></li>
        <li><a href="リンク先">項目名<br><span>item name</span></a></li>
    </ul>
</div>

<!-- 
【補足】
PC閲覧時に小さく表示される部分（<br><span>item name</span>）は不要であれば消していただいても問題ありません。
また、ご自分のメニュー項目数に応じて以下の一文を増減させてください。
<li><a href="リンク先">項目名<br><span>item name</span></a></li>
-->

<style type="text/css">
#top-editarea {
  width: 100%;
  background: #454545;
  margin-bottom: 30px;
  padding: 0;
}
#header-navigate {
  width: 1200px;
  margin: 0 auto;
}
#header-navigate ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
#header-navigate ul li {
  display: table-cell;
  vertical-align: middle;
  list-style-type: none;
  line-height: 90%;
}
#header-navigate ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  display: block;
  text-align: center;
  padding: 15px 0;
}
#header-navigate ul li a:hover {
  background: #adbcc3;
}
#header-navigate ul li span {
  font-size: 85%;
}
/* Media Queries - Tablet & Smartphone */
@media (max-width: 1200px) {
  #blog-description {
    display: none;
  }
  #header-navigate {
    width: 100%;
  }
  #header-navigate ul {
    display:block;
    overflow: scroll;
    white-space:nowrap;
    overflow-y: hidden;
  }
  #header-navigate ul li {
    display: inline-block;
    margin: 5px;
  }
  #header-navigate ul li a {
    padding: 5px 10px;
    font-size: 12px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  }
  #header-navigate ul li span {
    display: none;
  }
}
</style>