サポート » 使い方全般 » 自作テーマのヘッダー画像がPCだけ表示しない

  • 自作のテーマを作成してみました。
    レスポンシブデザインでスクリーンサイズでPCとスマホで表示するヘッダー画像やバックグラウンドの画像を変更する用設定したつもりでした。
    スマホでは正常表示されますが、PCではヘッダー画像やバックグラウンド画像が表示されません。

    CSSに問題があるように思うのですが⋯。

    解決法をご教示いただければ幸いです。

    ちなみにCSSは以下の通りです。

    /*
    Theme Name: landingpage1
    */
    @import url(“https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap”);
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    }

    html {
    line-height: 1;
    }

    ol, ul {
    list-style: none;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
    }

    q, blockquote {
    quotes: none;
    }
    q:before, q:after, blockquote:before, blockquote:after {
    content: “”;
    content: none;
    }

    a img {
    border: none;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
    }

    body {
    font-family: ‘Noto Sans JP’, sans-serif;
    color: #000000;
    font-size: 4vw;
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%;
    }

    ::-moz-selection {
    background-color: rgba(0, 0, 0, 0.2);
    }

    ::selection {
    background-color: rgba(0, 0, 0, 0.2);
    }

    a {
    outline: none;
    text-decoration: none;
    }
    a:link, a:visited {
    color: #000000;
    }
    a:hover, a:focus, a:active {
    color: #d1a82a;
    }

    img {
    vertical-align: bottom;
    max-width: 100%;
    }

    strong {
    font-weight: 700 !important;
    }

    sup {
    vertical-align: super;
    font-size: 60%;
    }

    .alignright {
    float: right;
    margin-left: 1em;
    }

    .alignleft {
    float: left;
    margin-right: 1em;
    }

    .textleft {
    text-align: left !important;
    }

    .textcenter {
    text-align: center !important;
    }

    .textright {
    text-align: right !important;
    }

    /* Wrapper
    —————————————————————- */
    .wrapper {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    }

    /* Container
    —————————————————————- */
    .container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 0 1em;
    }
    .container::after {
    content: ”;
    clear: both;
    display: block;
    }
    .inline-block_test {
    display: inline-block; /* インラインブロック要素にする */
    background-color: #fff; /* 背景色指定 */
    padding: 10px; /* 余白指定 */
    width: 475px; /* 高さ指定 */
    }

    /* Header
    —————————————————————- */
    .header {
    padding: 0.33em 0;
    background-color: #1a1a1a;
    }
    .header .logo {
    width: 10em;
    }

    /* Main visual
    —————————————————————- */
    .mv {
    background: url(“../img/mv_bg_sp.jpg”) no-repeat center top;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    }
    .mv .container {
    padding: 0.67em 0 2.5em;
    }
    .mv .ttl {
    margin-bottom: 0.7em;
    padding: 0 1.46em 0 0.93em;
    }
    .mv .txt01 {
    margin-bottom: 9em;
    padding: 0 10.67em 0 0.4em;
    }
    .mv .note {
    padding: 0 0.6em;
    }
    .mv .txt02 {
    margin-bottom: 0.23em;
    padding: 0 1em;
    }
    .mv .txt03 {
    padding: 0 0.93em 0 2.2em;
    }

    /* cv
    —————————————————————- */
    .cv {
    padding: 1.5em 0 1.67em;
    background: url(“../img/cv_bg_sp.jpg”) no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    .cv .container {
    padding: 0 0.9em;
    }
    .cv .box {
    padding: 0.3em;
    text-align: center;
    background-color: #1a1a1a;
    -webkit-border-radius: 0.67em;
    -moz-border-radius: 0.67em;
    -ms-border-radius: 0.67em;
    -o-border-radius: 0.67em;
    border-radius: 0.67em;
    }
    .cv .box .ttl {
    padding: 0.6em 3.9em;
    }
    .cv .box .inner {
    padding: 0.67em;
    background-color: #ffffff;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -ms-border-radius: 0.5em;
    -o-border-radius: 0.5em;
    border-radius: 0.5em;
    }
    .cv .box .inner .name {
    margin-bottom: 0.13em;
    padding: 0.4em 0.53em 0;
    }
    .cv .box .inner .price {
    margin-bottom: 0.3em;
    padding: 0 0.33em;
    }
    .cv .box .inner .plus {
    margin-bottom: 0.3em;
    padding: 0 0.46em;
    }
    .cv .box .inner .btn {
    margin-bottom: 0.2em;
    padding: 0 0.2em 0 0.3em;
    }
    .cv .box .inner .note {
    padding: 0 2em 0 3em;
    font-size: 53%;
    text-align: left;
    text-indent: -1em;
    line-height: 1.2;
    }

    /* Contents 1
    —————————————————————- */
    .contents01 {
    padding: 3.5em 0 3.6em;
    }
    .contents01 .ttl {
    margin-bottom: 1.57em;
    }
    .contents01 ul {
    margin-bottom: 3.3em;
    padding-right: 0.2em;
    }
    .contents01 ul li + li {
    margin-top: 0.4em;
    }
    .contents01 .txt04 {
    margin: 0 -0.07em 0 0;
    padding: 0 0 0 2.27em;
    }
    .contents01 .img01 {
    margin: -1em -0.1em 0;
    }

    /* Contents 2
    —————————————————————- */
    .contents02 .ttl {
    height: 7.53em;
    background-color: #f2f2f2;
    }
    .contents02 .ttl h2 {
    position: absolute;
    top: -1.2em;
    left: 3.07em;
    width: 19.07em;
    }
    .contents02 .txt01 {
    margin: -0.67em -0.4em 0.47em -0.07em;
    }
    .contents02 .txt02 {
    margin-bottom: 0.67em;
    }
    .contents02 .question {
    margin-bottom: 1.5em;
    padding: 1.4em 0 1.53em;
    background-color: #f2f2f2;
    }
    .contents02 .question .box {
    position: relative;
    padding: 1em;
    border: solid 0.07em #1b1b1b;
    background: white url(“../img/contents02_bg_sp.png”) no-repeat left bottom;
    -webkit-background-size: 7.07em;
    -moz-background-size: 7.07em;
    -o-background-size: 7.07em;
    background-size: 7.07em;
    -webkit-border-radius: 0.67em;
    -moz-border-radius: 0.67em;
    -ms-border-radius: 0.67em;
    -o-border-radius: 0.67em;
    border-radius: 0.67em;
    }
    .contents02 .question .box .txt03 {
    margin: -2.17em 0 1.63em;
    }
    .contents02 .question .box .txt04 {
    padding: 0 0 0.5em 6em;
    }
    .contents02 .txt05 {
    margin-bottom: 2.87em;
    padding: 0 1.53em;
    }

    /* Contents 3
    —————————————————————- */
    .contents03 .ttl {
    margin-bottom: 0.93em;
    padding: 2.9em 4.17em 0;
    }
    .contents03 .points {
    margin-bottom: 2.47em;
    padding: 1.93em 0 2.63em;
    background-color: #f7efd3;
    }
    .contents03 .points .point {
    padding: 1.1em;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.1);
    }
    .contents03 .points .point + .point {
    margin-top: 2.73em;
    }
    .contents03 .points .point .copy01 {
    margin-bottom: 0.3em;
    padding: 0 5.6em 0 5.27em;
    }
    .contents03 .points .point .sub01 {
    margin-bottom: 1.63em;
    padding: 0 0.17em;
    }
    .contents03 .points .point .txt01 {
    margin-bottom: 0.7em;
    padding: 0 1.37em;
    }
    .contents03 .points .point .img01 {
    margin: 0 -0.33em 1em;
    }
    .contents03 .points .point .copy02 {
    margin-bottom: 0.5em;
    padding: 0 4.03em 0 4.5em;
    }
    .contents03 .points .point .sub02 {
    margin-bottom: 1.47em;
    padding: 0 0.07em;
    }
    .contents03 .points .point .txt02 {
    margin-right: -0.73em;
    padding: 0 0 0 0.23em;
    }
    .contents03 .points .point .copy03 {
    margin-bottom: 0.5em;
    padding: 0 5.5em 0 4.5em;
    }
    .contents03 .points .point .sub03 {
    margin-bottom: 1.67em;
    padding: 0 0.07em;
    }
    .contents03 .points .point .txt03 {
    padding: 0 0.43em 0.5em;
    }
    .contents03 .comit {
    margin-bottom: 1.27em;
    padding: 0 0.4em;
    }

    /* Footer
    —————————————————————- */
    .footer {
    padding: 1em 0;
    background-color: #333333;
    }
    .footer .footernav {
    margin-bottom: 1em;
    font-size: 66.67%;
    text-align: center;
    letter-spacing: -0.4em;
    }
    .footer .footernav li {
    display: inline-block;
    padding: 0.1em 0.66em;
    letter-spacing: 0;
    }
    .footer .footernav li + li {
    border-left: solid 1px #ffffff;
    }
    .footer .footernav li a:link, .footer .footernav li a:visited {
    color: #ffffff;
    }
    .footer .footernav li a:hover, .footer .footernav li a:focus, .footer .footernav li a:active {
    color: #d1a82a;
    }
    .footer .copyright {
    color: #ffffff;
    font-size: 66.67%;
    text-align: center;
    }

    /* RWD
    —————————————————————- */
    @media only screen and (min-width: 751px) {
    body {
    font-size: 16px;
    }

    .wrapper {
    max-width: 100%;
    }

    .container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 100px;
    }

    .header {
    padding: 7px 0;
    }
    .header .logo {
    width: 92px;
    float: right;
    }

    .mv {
    background: url(“../img/mv_bg_pc.jpg”) no-repeat center top;
    -webkit-background-size: 2000px;
    -moz-background-size: 2000px;
    -o-background-size: 2000px;
    background-size: 2000px;
    }
    .mv .container {
    padding: 30px 0 50px;
    }
    .mv .ttl {
    margin-bottom: 0;
    padding: 0 0 0 37px;
    }
    .mv .txt01 {
    margin-top: -15px;
    margin-bottom: 82px;
    padding: 0 0 0 212px;
    }
    .mv .note {
    margin-bottom: 5px;
    padding: 0 0 0 24px;
    }
    .mv .txt02 {
    margin-bottom: 0;
    padding: 0 0 0 292px;
    }
    .mv .txt03 {
    margin-top: -42px;
    padding: 0 0 0 321px;
    }

    .cv {
    padding: 45px 0;
    background: url(“../img/cv_bg_pc.jpg”) no-repeat 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    .cv .container {
    padding: 0 100px;
    }
    .cv .box {
    padding: 4px;
    text-align: left;
    background-color: #1a1a1a;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    }
    .cv .box .ttl {
    padding: 15px 0;
    text-align: center;
    }
    .cv .box .inner {
    padding: 32px 61px;
    background-color: #ffffff;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    }
    .cv .box .inner .name {
    margin-bottom: 0;
    padding: 0;
    }
    .cv .box .inner .price {
    margin-top: -49px;
    margin-bottom: 0;
    padding: 0 0 0 156px;
    }
    .cv .box .inner .plus {
    margin-top: -8px;
    margin-bottom: 11px;
    padding: 0 0 0 1px;
    }
    .cv .box .inner .btn {
    margin-bottom: 4px;
    padding: 0 0 0 2px;
    }
    .cv .box .inner .btn a:hover {
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }
    .cv .box .inner .note {
    padding: 0;
    font-size: 62.5%;
    text-align: center;
    text-indent: 0;
    line-height: 1.2;
    }

    .contents01 {
    padding: 65px 0 52px;
    }
    .contents01 .ttl {
    margin-bottom: 13px;
    }
    .contents01 ul {
    margin-bottom: 75px;
    padding: 0;
    text-align: center;
    }
    .contents01 ul li + li {
    margin-top: 0;
    }
    .contents01 .txt04 {
    margin: 0;
    padding: 0 0 0 239px;
    }
    .contents01 .img01 {
    margin: -30px 0 0;
    text-align: center;
    }

    .contents02 .ttl {
    height: 136px;
    }
    .contents02 .ttl h2 {
    top: -35px;
    left: 145px;
    width: 926px;
    }
    .contents02 .txt01 {
    margin: -22px 0 15px;
    padding: 0 178px 0 191px;
    }
    .contents02 .txt02 {
    margin-bottom: 20px;
    padding: 0 58px 0 71px;
    }
    .contents02 .question {
    margin-bottom: 20px;
    padding: 63px 0;
    }
    .contents02 .question .box {
    position: relative;
    padding: 35px 48px;
    border: solid 2px #1b1b1b;
    background: white url(“../img/contents02_bg_pc.png”) no-repeat left bottom;
    -webkit-background-size: 280px;
    -moz-background-size: 280px;
    -o-background-size: 280px;
    background-size: 280px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    }
    .contents02 .question .box .txt03 {
    margin: -89px 0 25px;
    padding-left: 233px;
    }
    .contents02 .question .box .txt04 {
    padding: 0 0 0 232px;
    }
    .contents02 .txt05 {
    margin-bottom: 60px;
    padding: 0 3px;
    }

    .contents03 .ttl {
    margin-bottom: 38px;
    padding: 78px 185px 0 145px;
    }
    .contents03 .points {
    margin-bottom: 27px;
    padding: 50px 0 60px;
    }
    .contents03 .points .point {
    padding: 30px 80px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .contents03 .points .point + .point {
    margin-top: 56px;
    }
    .contents03 .points .point .copy01 {
    margin-bottom: 0;
    padding: 0 293px 0 283px;
    }
    .contents03 .points .point .sub01 {
    margin-top: -41px;
    margin-bottom: 43px;
    padding: 0;
    }
    .contents03 .points .point .txt01 {
    margin-bottom: 19px;
    padding: 0 1px;
    }
    .contents03 .points .point .img01 {
    margin: 0 0 25px;
    padding: 0 131px 0 125px;
    }
    .contents03 .points .point .copy02 {
    margin-bottom: 20px;
    padding: 0 260px 0 253px;
    }
    .contents03 .points .point .sub02 {
    margin-right: -10px;
    margin-bottom: 18px;
    padding: 0;
    }
    .contents03 .points .point .txt02 {
    margin-right: -15px;
    padding: 0 0 0 27px;
    }
    .contents03 .points .point .copy03 {
    margin-bottom: 0;
    padding: 0 281px 0 230px;
    }
    .contents03 .points .point .sub03 {
    margin-top: -34px;
    margin-right: -16px;
    margin-bottom: 28px;
    padding: 0;
    }
    .contents03 .points .point .txt03 {
    margin-right: -13px;
    padding: 0;
    }
    .contents03 .comit {
    margin-bottom: 32px;
    padding: 0 94px;
    }
    .contents03 .img02 {
    padding: 0 80px;
    }

    .footer {
    padding: 45px 0;
    }
    .footer .footernav {
    margin-bottom: 24px;
    font-size: 17px;
    }
    .footer .footernav li + li {
    border-left: solid 2px #ffffff;
    }
    .footer .copyright {
    font-size: 14px;
    }
    }

    ヘルプの必要なページ: [リンクを見るにはログイン]

1件の返信を表示中 - 1 - 1件目 (全1件中)
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「自作テーマのヘッダー画像がPCだけ表示しない」には新たに返信することはできません。