はてなブログ、カスタマイズしてみた②（ヘッダ編）

ここまできたらヘッダもなんか編集したい

ヘッダがあるとホムペっぽい。
というわけで、カテゴリボタンをつけていきましょ

「デザイン」>「（レンチマーク）」>「ヘッダ」>「ブログタイトル下」

そこまでいくと、そこにhtmlが記述できるようになってる。

実際にこのサイトで書いてるコードは↓
htmlを書き、styleタグ内に適応させたいcssを書いています。

<div class="nav">
<ul>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/写真"><li>PHOTO</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/バスケ"><li>BASKETBALL</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/ブレイク"><li>BREAK</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/音楽"><li>MUSIC</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/建築"><li>ARCHITECTURE</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/開発"><li>ENGINEERING</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/コーヒー"><li>COFFEE</li></a>
    <a href="https://nuidarabakeru.hatenablog.jp/archive/category/ビール"><li>BEER</li></a>    
</ul>
</div>
<style>
.nav ul {
  padding: 0 2vw;
  list-style: none;
  display: flex;
  overflow-x: none;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
.nav ul ::-webkit-scrollbar {
  display: none;
}
.nav ul a{
    text-decoration: none;
    color: #454545;
    font-weight: bold;
}
.nav ul li {
  width: calc(100% / 8);
  height: 8vw;
  line-height: 8vw;
  text-align: center;
  margin: 0 2vw;
  font-size: 1.5vw;
}
</style>

こんな感じ、一般化すると
※（）部分が自分で編集するところ

<div class="nav">
<ul>
    <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a>
    <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a>
 　<a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a>
    <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a>
    <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a>
    <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a>
    <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> 
</ul>
</div>
<style>
.nav ul {
  padding: 0 2vw;
  list-style: none;
  display: flex;
  overflow-x: none;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
.nav ul ::-webkit-scrollbar {
  display: none;
}
.nav ul a{
    text-decoration: none;
    color: #454545;
    font-weight: bold;
}
.nav ul li {
  width: calc(100% / （カテゴリ数）);   /* （カテゴリ数）等分になる */
  height: 8vw;
  line-height: 8vw;
  text-align: center;
  margin: 0 2vw;
  font-size: 1.5vw;
}
</style>

まあこんな感じ。サイズとかはお好みで変えればOKです。

やっぱりヘッダがあるといい感じ。
ぜひつけてみてくだせえ