【レスポンシブ対応】HTMLとCSSで作る!はてなブログのグローバルメニュー10選+(調整可能)

サムネイル CSS

今回ははてなブロガーに向けて、HTMLとCSSだけで作れるグローバルメニューのデザインを10+個紹介します。全部コピペOKです!

レスポンシブデザインにも対応しています。

「グローバルメニューのコードは書いてあるけど自力で調整する方法が書いてなくて結局ダメだった」みたいなことや、「スマホで表示が崩れるから結局ダメだった」みたいなこともあると思います。

なので、最後に幅や余白が自分のブログに合わなかった時の調整方法も解説します(コードの途中途中でも少しずつ解説しています)

 

スポンサーリンク

コードを書く場所

はてなブログではHTMLとCSSの両方を記述します。

「ダッシュボード→デザイン→スパナアイコン→ヘッダ」と進みます。

その下にある「タイトル下」という場所にHTMLを書きます。

また、画面の一番左下に「デザインCSS」という場所があるはずです。そこにCSSを書きます。

画像1

 

HTMLコード

今回紹介するグローバルメニューのHTMLコードはずっと同じです。

「タイトル下」にコードをコピペしたら、あとは「追加CSS」にこれから紹介するコードをコピペして完成です。

<ul id="g-nav">
    <li class="nav-item"><a href="カテゴリー1のURL">カテゴリー1</a></li>
    <li class="nav-item"><a href="カテゴリー2のURL">カテゴリー2</a></li>
    <li class="nav-item"><a href="カテゴリー3のURL">カテゴリー3</a></li>
    <li class="nav-item"><a href="カテゴリー4のURL">カテゴリー4</a></li>
   <li class="nav-item"><a href="カテゴリー5のURL">カテゴリー5</a></li>
</ul>

 

背景色があるデザイン

 

白い文字に背景色をつけたシンプルなデザインです。

マウスが乗っても何も起きませんが、実際にブログにコードを貼り付けると文字色が変わると思います。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background-color: #37a9d7;/* 背景色 */
}
.nav-item {
    display: table-cell;
   list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    color: #fff;/* 文字色 */
    padding: 10px 0;
    text-decoration: none;
}

 

左詰めのデザイン

 

画面中央寄せではなく、左側に寄せてメニューが並びます。

#g-nav {
    display: block;
    width: 100%;
    font-weight: bold;
    background-color: #37a9d7;/* 背景色 */
}
.nav-item {
    display: inline-block;
    list-style-type: none;
    text-align: center;
}
.nav-itemle a {
    display: block;
    padding: 10px 10px;
    color: #fff;/* 文字色 */
    text-decoration: none;
}

 

マウスが乗ると変化するデザイン

 

マウスが乗ると背景色と文字色が変わるようになります。よく見かけるデザインですね。

色はお好みで決めてください。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background-color: #37a9d7;/* 背景色 */
}
.nav-item {
   display: table-cell;
   list-style-type: none;
   text-align: center;
}
.nav-item a {
    display: block;
    color: #fff;/* 文字色 */
    padding: 10px 0;
    text-decoration: none;
    transition: 0.2s;/* 変化にかかる時間 */
}
.nav-item a:hover {
    background-color: #fff;/* マウスがホバーした時の背景色 */
    color: #37a9d7;/* マウスがホバーした時の文字色 */
}

 

枠線で囲んだデザイン

 

それぞれを枠線で囲ってみました。枠線の色や太さは自由に変更が可能です。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
}
.nav-item {
    display: table-cell;
    list-style-type: none;
    text-align: center;
    border: 2px solid #ddd;/* ボーダーの太さと色 */
    border-right: none;
}
.nav-item:last-child {
    border-right: 2px solid #ddd;/* ボーダーの太さと色 */
}
.nav-item a {
    display: block;
    padding: 10px 0;
    color: #333;/* 文字色 */
    text-decoration: none;
}

 

縦線で区切ったデザイン

 

縦線で区切ったデザインです。すっきりとして見やすいのが特徴です。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
}
.nav-item {
    display: table-cell;
    padding: 10px 0;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    color: #333;/* 文字色 */
    border-left: 1px solid #ddd;/* 縦線の太さと色 */
}
.nav-item:first-child a {
    border: none;
}

 

両端を丸角にしたデザイン

 

それぞれのカテゴリーの両端を丸くしたデザインです。

このままだとあまりかっこよくないので、色をお好みで変更してください。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    padding: 10px 0;
    background-color: #ededed;/* 背景色 */
}
.nav-item {
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    padding: 5px 10px;
    background-color: #ddd;/* カテゴリーの背景色 */
    color: #333;/* 文字色 */
    border-radius: 15px / 50%;
    text-decoration: none;
}

 

中央下から下線が伸びるデザイン

 

マウスが乗ると中央から下線が伸びます。おしゃれなサイトでよく見かけます。

下線の幅は100%となっていますが、幅を変更したい場合は75%や50%というように変更してもらえれば短くなります。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
}
.nav-item {
    display: table-cell;
    padding: 10px 0;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    position: relative;
    color: #333;/* 文字色 */
    text-decoration: none;
}
.nav-item a::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    width: 0px;
    height: 2px;
    background-color: #333;
    margin: 0 auto;
    transition: 0.3s;
    transform: translateX(-50%);
}
.nav-item a:hover::after {
    width: 100%;/* 下線の長さ */
}

 

下線が下から出てくるデザイン

 

マウスが乗ると下線が下からスッと出てきます。

上のデザインと同じように下線の幅を変更することもできます。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
}
.nav-item {
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    position: relative;
    display: block;
    color: #333;/* 文字色 */
    padding: 10px 0;
    text-decoration: none;
}
.nav-item a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;/* 下線の幅 */
    height: 3px;
    background-color: #333;
    margin: 5px auto 0;
    opacity: 0;
    transition: 0.2s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}
.nav-item a:hover::after {
    -webkit-transform: translate(-50%, -5px);
    transform: translate(-50%, -5px);
    opacity: 1;
}

 

三角形が下から現れるデザイン

 

マウスが乗ると三角形が下から現れます。
三角形の色は.nav-item10 a::after#fffという部分を変えると色を変更できます。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background-color: #333;/* 背景色 */
}
.nav-item {
    position: relative;
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    color: #fff;/* 文字色 */
    padding: 10px 0;
    text-decoration: none;
}
.nav-item a::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;/* 三角形の色 */
    transition: 0.2s;
    pointer-events: none;
    opacity: 0;
}
.nav-item a:hover::after {
    -webkit-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px);
    opacity: 1;
}

 

ステッチ風のデザイン

 

周りに破線をつけてステッチ風にしたデザインです。かわいらしい雰囲気のブログとすごく相性が良さそうです。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background-color: #93d6eb;/* 背景色 */
    border: 2px dashed #fff;/* 枠線の太さと色 */
    box-shadow: 0 0 0 4px rgba(147, 214, 235, 1);/* 背景色 */
}
.nav-item {
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    color: #fff;/* 文字色 */
    padding: 10px 0;
    text-decoration: none;
}

 

グラデーションをかけたデザイン

 

ナビゲーション全体にブラデーションをかけてみました。使う色によっては様々な印象を与えることができます。

グラデーションはbackgroundという箇所で操作しています。

最初は角度を指定します。90°で左から右へ、180°で上から下へとグラデーションがかかります(もちろん斜めも可能です)

2つ目は開始色で、3つ目が終了色になっています。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background: -webkit-linear-gradient(180deg, #e265de, #f6cbf4);/* グラデーション */
    background: linear-gradient(180deg, #e265de, #f6cbf4);/* グラデーション */
}.nav-item {
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    color: #fff;/* 文字色 */
    padding: 10px 0;
    text-decoration: none;
}

 

レスポンシブデザイン

グローバルメニューをレスポンシブデザインにするには以下のコードをデザインCSSに追加してください。

上記で紹介した全てのデザインをレスポンシブデザインに対応させることができます。

今回はスマホで表示した場合に入りきらないカテゴリーは、横スクロールによって表示できるようにしました。

 

@media(max-width: 768px) {
    #g-nav {
        display: block;
    overflow-x: auto;
    }
    .nav-item a {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 20px;
    }
}

 

ただし、両端を丸角にしたデザインの人は、以下のコードになります。

@media(max-width: 768px) {
    #g-nav {
        display: block;
        overflow-x: auto;
        padding: 7px 0;/* ナビゲーションの余白 */
    }
    .nav-item {
        padding: 0 10px;
    }
    .nav-item a {
        display: inline-block;
        white-space: nowrap;
        padding: 3px 10px!important;
    }
}

 

自分好みにカスタマイズする方法

ここからはグローバルメニューを自分のブログに合うようにスタイルを変更する方法を紹介します。

 

色の変更

コード中に書いてあるコメントを参考にしてください。

色を選ぶ際はこのサイトが参考になります。

 

変更に失敗しても表示が崩れるだけで、サイトが壊れたりすることはないので安心してください。

 

マウスが乗った時に変化させたい場合

マウスが乗った時に色や背景色を変更したい場合は、以下のコードを追加します。

色を自分の好きなように変更してください。

.nav-item a:hover {
    background-color: #fff;/* 背景色 */
    color: #333;/* 文字色 */
    opacity: 0.7;/* 不透明度 */
}

 

また、ふわっと変化させたい場合はさらに以下のコードをそのまま追加します。

.nav-item {
    transition: 0.2s;/* 変化にかかる秒数 */
}

0.2sの場合、マウスが乗ると0.2秒かけて変化するということです。

変化にかかる秒数も自分好みに変更してください。

 

マウスが乗った時のデフォルトの下線を消したい場合

マウスがメニューに乗るとリンクに自動でつく下線が表示されてしまうかもしれません。

これを消したい場合は以下のコードを追加します。

.nav-item a:hover {
    text-decoration: none;
}

 

上下の位置が合わない場合

メニューを付けたはいいが、ヘッダーとの間に変な隙間ができてしまったり、逆にヘッダーと被ってしまって見づらいということがあるかもしれません。

そんな場合は以下のコードを追加します。

#g-nav {
    margin-top: 5px;/* 上下の余白を調整 */
}

数値を大きくすると上の余白が大きくなり、逆に小さくすると上の余白を詰めることができます。マイナスの値も指定可能です。

 

カテゴリーを増やしたい場合

カテゴリーを増やしたい場合はHTMLの<li>〜</li>を増やすだけです。

URLを変更するのを忘れないようにしましょう。

 

メニューをさらに中央寄せにしたい場合

上記で紹介したコードはいずれも画面全体にメニューが広がるようになっています。

メニュー全体をさらに中央寄せにしたい場合はHTML構造を少し変えます。CSSへの影響はないので大丈夫です。

最初のHTMLコードを一度消して、以下のコードを「タイトル下」にコピペしてください。

<nav class="nav">
    <ul id="g-nav">
        <li class="nav-item"><a href="カテゴリー1のURL">カテゴリー1</a></li>
        <li class="nav-item"><a href="カテゴリー2のURL">カテゴリー2</a></li>
        <li class="nav-item"><a href="カテゴリー3のURL">カテゴリー3</a></li>
        <li class="nav-item"><a href="カテゴリー4のURL">カテゴリー4</a></li>
        <li class="nav-item"><a href="カテゴリー5のURL">カテゴリー5</a></li>
    </ul>
</nav>

 

次に以下のコードを「デザインCSS」に追加してください。

.nav {
    display: block;
    background-color: #37a9d7;/* #g-navと同じ色を指定 */
}
#g-nav {
    width: 80%;/* ナビゲーションの幅 */
    margin: 0 auto;
}

するとこのように両端に余白ができて、より中央に寄せたデザインになります。

 

width: 80%;の値を大きくすると外側に広がり、小さくするとさらに中央寄せになります。

 

影を付けたい場合

グローバルメニューに影をつけたいときは以下のコードを追加します。

#g-nav {
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3);
}

 

ただし、上記の「メニューをより中央寄せにするコード」をコピペした人は、以下のコードになります。

.nav {
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3);
}

 

オリジナルのグローバルメニューを作る

自分で勉強して一からグローバルメニューを作るのも面白いかもしれません。知識があると細かい調整や自分好みにカスタマイズできるのがいいですよね。

一から作れないとしても、ネットから拾ったコードをいじって調整するくらいならそこまで難しくないはずです。

 

HTML・CSS初心者は以下の本で勉強するのがおすすめです。僕も1冊目にこの本で勉強して基本を習得しました。

これ1冊で拾ったコードをいじるくらいは簡単にできるようになると思います。

 

まとめ

今回はグローバルメニューを10個+何個か紹介しました。

自分のブログに合うように色を調整すると、もっとおしゃれになると思います。

グローバルメニューがあるとサイトの回遊率も高くなるので、pvアップにも貢献してくれそうです。