アメブロにメニューバーを設置する方法｜好きな色のグローバルナビ【動画付き】

1
<nav class="gnav"><ul class="gnav-inner">
2
  <li><a href="【メニュー1のURL】">【メニュー1の名前】</a></li>
3
  <li><a href="【メニュー2のURL】">【メニュー2の名前】</a></li>
4
  <li><a href="【メニュー3のURL】">【メニュー3の名前】</a></li>
5
  <li><a href="【メニュー4のURL】">【メニュー4の名前】</a></li>
6
  <li><a href="【メニュー5のURL】">【メニュー5の名前】</a></li>
7
</ul></nav>

1
/****** グローバルメニュー用設定 ******/
2
/* 各種デザイン設定 */
3
:root {
4
  --gnav-h: 60px; /* メニューバーの高さ */
5
  --gnav-w: 1120px; /* メニューバーの横幅 */
6
  --gnav-header-h: 400px; /* ヘッダー画像の高さ */
7
  --gnav-bg: #fffff; /* メニューバーの背景色設定 */
8
  --gnav-border: #E5E5E5; /* 枠線の色 */
9
  --gnav-btn-n: 5; /* メニューの数 */
10
  --gnav-btn-font: #333333; /* メニューの文字色 */
11
  --gnav-btn-bg: #fff; /* ボタンの背景色設定 */
12
}
13
/* 原点をページの左上に設定 */
14
.skin-page {
15
  position: relative;
16
}
17
.skin-columnA .skin-blogSubA,
18
.skin-columnB .skin-blogSubA,
19
.skin-columnC .skin-blogSubA,
20
.skin-columnC .skin-blogSubB,
21
.skin-columnD .skin-blogSubA,
22
.skin-columnD .skin-blogSubB,
23
.skin-columnE .skin-blogSubA,
24
.skin-columnE .skin-blogSubB {
25
  position: static;
26
}
27
/* グローバルナビを設置 */
28
.skin-page {
29
  padding-top: 0;
30
}
31
.gnav {
32
  position: absolute;
33
  top: var(--gnav-header-h);
34
  left: 0;
35
  width: 100%;
36
  background: var(--gnav-bg);
37
}
38
.skin-bgHeader {
39
  margin-bottom: var(--gnav-h);
40
  height: var(--gnav-header-h);
41
}
42
.gnav{
43
  border-top: 1px solid var(--gnav-border);
44
  border-bottom: 1px solid var(--gnav-border);
45
}
46
.gnav, .gnav * {
47
  box-sizing: border-box !important;
48
}
49
.gnav >br,
50
.gnav >br~br,
51
.gnav ul >br,
52
.gnav li >br,
53
.gnav ul >br~br,
54
.gnav li >br~br {
55
  display: none;
56
}
57
.gnav .gnav-inner {
58
  display: flex;
59
  margin: auto;
60
  width: var(--gnav-w);
61
  border-right: 1px solid var(--gnav-border);
62
}
63
.gnav .gnav-inner >li {
64
  width: calc(100% / var(--gnav-btn-n));
65
  height: var(--gnav-h);
66
  line-height: 1.25;
67
  text-align: center;
68
  overflow: hidden;
69
}
70
.gnav .gnav-inner li >a,
71
.gnav .gnav-inner li >span {
72
  display: flex;
73
  align-items: center;
74
  justify-content: center;
75
  padding: 0 0.5rem;
76
  height: var(--gnav-h);
77
  text-decoration: none;
78
  color: var(--gnav-btn-font);
79
  background: var(--gnav-btn-bg);
80
  border-left: 1px solid var(--gnav-border);
81
}
82
.gnav .gnav-inner li >a:hover,
83
.gnav .gnav-inner li >span:hover {
84
  opacity: 0.4;
85
  cursor: pointer;
86
}
87
/****** グローバルメニュー用設定ここまで ******/

1
/* 各種デザイン設定 */
2
:root {
3
  --gnav-h: 60px; /* メニューバーの高さ */
4
  --gnav-w: 1120px; /* メニューバーの横幅 */
5
  --gnav-header-h: 400px; /* ヘッダー画像の高さ */
6
  --gnav-bg: #fffff; /* メニューバーの背景色設定 */
7
  --gnav-border: #e5e5e5; /* 枠線の色 */
8
  --gnav-btn-n: 5; /* メニューの数 */
9
  --gnav-btn-font: #333333; /* メニューの文字色 */
10
  --gnav-btn-bg: #fffff; /* ボタンの背景色設定 */
11
}

1
/* 各種デザイン設定 */
2
:root {
3
  --gnav-h: 60px; /* メニューバーの高さ */
4
  --gnav-w: 1120px; /* メニューバーの横幅 */
5
  --gnav-header-h: 400px; /* ヘッダー画像の高さ */
6
  --gnav-bg: #69472C; /* メニューバーの背景色設定 */
7
  --gnav-border: #F1EEE9; /* 枠線の色 */
8
  --gnav-btn-n: 5; /* メニューの数 */
9
  --gnav-btn-font: #F1EEE9; /* メニューの文字色 */
10
  --gnav-btn-bg: #69472C; /* ボタンの背景色設定 */
11
}