ヘッダーメニューを少し変えよう
デザインについては一応前回のでいいという事にしたので、見辛くなってしまったヘッダーメニューを見やすくしましょう。
ちなみに今はこんな感じ
見えなくも無いですが、若干見辛いですね。
背景を透過しないで色をつけて、文字もそれに合わせてあげれば見やすくなると思います。
作業的にはそれだけなんですが、ちなみに今はどんな指定になっているか公開します。
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: "_";
height: 0;
visibility: hidden;
}
.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 220px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
overflow: visible;
-moz-user-select: text;
display: block;
text-decoration: none;
border: 2px solid #666;
border-radius: 6px;
margin-bottom: 16px;
transition: all 0.5s ease;
color: #FFF;
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}
/* メニューバーのデザイン（マウスオーバー時） */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
background:#dfefff;
color:#fff;
}
.nav-menu li a:-moz-focus-inner {
padding: 0;
border: 0;
}
.nav-menu li a {
overflow: hidden;
position: relative;
}
.nav-menu li a:after {
content: '';
display: block;
height: 7px;
width: 100%;
background-image: repeating-linear-gradient(45deg,#666,#666 1px,transparent 2px,transparent 5px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-top: 1px solid #666;
position: absolute;
left: 0;
bottom: 0;
background-size: 7px 7px;
}
.nav-menu li a:hover {
background-color: #666;
color: #fff;
border-color: #000;
}
.nav-menu li a:hover:after {
background-image: repeating-linear-gradient(45deg,#fff,#fff 1px,transparent 2px,transparent 5px);
border-top: 1px solid #000;
animation: stripe-slide 12s infinite linear forwards;
}
@keyframes stripe-slide {
0% {
background-position: 0% 0;
}
100% {
background-position: 100% 0;
}
}
大分長いですね。
疑似要素をたっぷり使っているので、仕方ないです。
とりあえず背景を白にして文字を黒くしてみましょう。
見やすくなりましたね。
もうこれでいいんじゃないかなｗ
前回配色について色々書いて結局どうにもならなかったのですが、せっかくなので、前回の配色を使ってみましょう。
うん白にしようｗ
枠を消して、文字色を白にすればいい感じになるかもしれませんが、今回マウスを載せると下のギザギザが動くという物にしたので、枠を消すと違和感が凄そうなので、おとなしく白です！
特殊なギミックが無ければぷりんとしたボタンに出来ましたが、あんまりころころ変えているとなんなんだころのブログは！？
となりそうなので、大人しくしておきます。