このブログのヘッダーをどうするか悩んだ結果、HTMLを調整することにしました。

本日はこのブログのヘッダーを分かりやすくしたいと思い、思い切って調整を行いました！

実は、このセリフ集を投稿しているブログには、500以上の記事が掲載されております。
ここまで記事数が多くなると、正直どこにあるか分からなくなります笑💦

今回は分かりやすく&見やすくする為（←これ重要！）には、どうしたらいいかを考えました。

結論を言うと、このHTMLに変更することにしました。

主に文字の見やすさ向上とちょっとしたアニメーションを加えてみました✨

以前は『黒背景』＋『白文字』のアニメーションなしのシンプルなデザインではありましたが、シンプルすぎました。

▼結論でいうと、このヘッダーに変更しました。

<style>
/* ナビゲーション全体の背景設定 */
.nav-container {
background-color: #2c3e50; /* 暗いネイビー */
padding: 5px 0;
border-radius: 8px; /* 角を少し丸くしておしゃれに */
margin: 10px 0;
overflow-x: auto;
white-space: nowrap;
text-align: center;
}

.nav-tile {
display: inline-block;
padding: 12px 20px;
text-decoration: none;
font-weight: bold;
font-size: 0.85em;
border-bottom: 3px solid transparent;
transition: 0.3s;
}

/* 奇数番目：明るいテーマカラー */
.nav-tile:nth-child(odd) {
color: #62c7c9;
}

/* 偶数番目：白（暗い背景で最も映える色） */
.nav-tile:nth-child(even) {
color: #ffffff;
}

.nav-tile:hover {
color: #ffffff;
border-bottom-color: #62c7c9;
background: rgba(255, 255, 255, 0.1); /* 軽く光るエフェクト */
}

/* スクロールバーのカスタマイズ（スマホ用） */
.nav-container::-webkit-scrollbar {
height: 5px;
}
.nav-container::-webkit-scrollbar-thumb {
background: #62c7c9;
border-radius: 10px;
}
</style>
<nav class="nav-container"><a href="URL" class="nav-tile">HOME</a>

<a href="URL" class="nav-tile">セリフ配信向きセリフ</a>
<a href="URL" class="nav-tile">ボイスサンプル向きセリフ</a>
<a href="URL" class="nav-tile">男性セリフ</a>
<a href="URL" class="nav-tile">女性セリフ</a>
<a href="URL" class="nav-tile">感情別セリフ</a>
<a href="URL" class="nav-tile">滑舌練習台本</a>
<a href="URL" class="nav-tile">運営note</a></nav>

いい感じに目立つように調整できたと思います。

▼使わなかったのですがこういったアイディアもありました。

案①　シンプル＋アニメーションあり（URL未設定）

<style>
.nav-tile {
display: inline-block;
padding: 12px 20px;
text-decoration: none;
color: #333333;
font-weight: bold;
font-size: 0.85em;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
.nav-tile:hover {
color: #333333;
border-bottom-color: #333333;
background: rgba(98, 199, 201, 0.05);
}
</style>
<nav style="overflow-x: auto; white-space: nowrap; text-align: center;"><a href="URL" class="nav-tile">HOME</a> <a href="URL" class="nav-tile">男性向け</a> <a href="URL" class="nav-tile">女性向け</a> <a href="URL" class="nav-tile">ファンタジー</a></nav>

案②シンプル＋アニメーション＋外枠（URL未設定）

<style>
.nav-sharp {
display: inline-block;
padding: 8px 15px;
margin-right: -1px; /* 境界線を重ねてスッキリ見せる */
text-decoration: none;
color: #333;
font-size: 0.8em;
font-weight: bold;
border: 1px solid #ddd;
transition: 0.2s;
}
.nav-sharp:hover {
background: #333;
color: #fff;
border-color: #333;
}
</style>
<nav style="overflow-x: auto; white-space: nowrap; padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;"><a href="URL" class="nav-sharp">HOME</a> <a href="URL" class="nav-sharp">男性向け</a> <a href="URL" class="nav-sharp">女性向け</a> <a href="URL" class="nav-sharp">ファンタジー</a> <a href="URL" class="nav-sharp">滑舌練習</a></nav>
<p> </p>