PC閲覧時のメニューバーに色をつけました-WordPress Twenty Twelveカスタマイズ

公開 更新

スマホ閲覧時の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;
    }
}

完成形はこちらです。

完成

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です