スマホ閲覧時のmenuは色が付いてカラフルになっているのに、PC閲覧時のメニューバーはデフォルトのままにしていたウェブシュフです。スマホでもPCでも同様の色彩が再現されるよう、CSSをいじってみました。
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
（中略）
}
という部分を、そっくり以下の内容に入れ替えます。
/* Minimum width of 750 pixels. */
@media screen and (min-width: 750px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
.site {
margin: 0 auto;
max-width: 1200px;
max-width: 85.7142857142rem;
overflow: hidden;
}
.site-content {
float: left;
/***width: 65.104166667%;***/
margin: 12px -364px 0 0;
margin: 0.857142857rem -26rem 0 0;
width: 100%;
z-index: 0;
}
#content{
margin: 0 364px 0 0;
margin: 0 26rem 0 0;
}
body.template-front-page .site-content,
body.single-attachment .site-content,
body.full-width .site-content {
width: 100%;
}
.widget-area {
float: right;
/***width: 26.041666667%;***/
margin: /**24px**/12px 0 0 0;
margin: /**1.714285714**/0.857142857rem 0 0 0;
width:336px;
width:24rem;
z-index: 1;
position: relative;
}
.site-header h1,
.site-header h2 {
text-align: left;
}
.site-header h1 {
font-size: 26px;
font-size: 1.857142857rem;
line-height: 1.846153846;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul,
.main-navigation ul.nav-menu.toggled-on,
.main-navigation div.nav-menu > ul.toggled-on {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
background:#00a48c;
-moz-border-radius:7px;
-webkit-border-radius:7px;
-khtml-border-radius:7px;
border-radius:7px;
-moz-border-radius:0.5rem;
-webkit-border-radius:0.5rem;
-khtml-border-radius:0.5rem;
border-radius:0.5rem;
}
/***.main-navigation ul {
margin:7px 0;
margin:0.5rem 0;
text-indent: 0;
}**/
.main-navigation li a,
.main-navigation li,
.main-navigation ul.nav-menu.toggled-on li a,
.main-navigation ul.nav-menu.toggled-on li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a ,
.main-navigation ul.nav-menu.toggled-on li a {
border-bottom: 0;
color: #ffffff;
line-height: 3.692307692;
text-transform: uppercase;
background:#00a48c;
-moz-border-radius:5.6px;
-webkit-border-radius:5.6px;
-khtml-border-radius:5.6px;
border-radius:5.6px;
-moz-border-radius:0.4rem;
-webkit-border-radius:0.4rem;
-khtml-border-radius:0.4rem;
border-radius:0.4rem;
padding:0 7px;
padding:0 0.5rem;
}
.main-navigation ul.nav-menu.toggled-on li a:hover,
.main-navigation li a:hover {
background: #00a48c;
color: yellow;
}
.main-navigation ul.nav-menu.toggled-on li,
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
.main-navigation ul.nav-menu.toggled-on li ul,
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation ul.nav-menu.toggled-on li ul ul,
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul.nav-menu.toggled-on li:hover > ul,
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
margin:0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation ul.nav-menu.toggled-on li ul li a,
.main-navigation li ul li a {
background: #efefef;
color:#000000;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
}
.main-navigation ul.nav-menu.toggled-on li ul li a:hover ,
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #ffffff;
font-weight: bold;
}
.menu-toggle {
display: none;
}
.entry-header .entry-title {
font-size: 22px;
font-size: 1.571428571rem;
}
#respond form input[type="text"] {
width: 46.333333333%;
}
#respond form textarea.blog-textarea {
width: 79.666666667%;
}
.template-front-page .site-content,
.template-front-page article {
overflow: hidden;
}
.template-front-page.has-post-thumbnail article {
float: left;
width: 47.916666667%;
}
.entry-page-image {
float: right;
margin-bottom: 0;
width: 47.916666667%;
}
.template-front-page .widget-area .widget,
.template-front-page.two-sidebars .widget-area .front-widgets {
float: left;
width: 51.875%;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.template-front-page .widget-area .widget:nth-child(odd) {
clear: right;
}
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
float: right;
width: 39.0625%;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
.template-front-page.two-sidebars .widget,
.template-front-page.two-sidebars .widget:nth-child(even) {
float: none;
width: auto;
}
}
完成形はこちらです。
