サポート » 使い方全般 » 隠した画像が表示され、画像サイズもバラバラ

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • ヒント:
    display:inlineに対してwidthは適用されません。参考までにimgのデフォルトdisplay値はinline-blockですが、cssで指定しなかった場合親要素の大きさを考慮しなかったはず。

    貼られたCSS、何か違和感感じるとおもってよく見てみると対象がdivだったりimgだったりバラバラですね。それが消えない原因かも。

    リンク先404です><

    HTML見直したらdiv > .sonly と img.sonly とあるんですね。(消えないのそれか!)

    あとimportantの使用は必要無さそう……(あまり多用は推奨されません。)

    トピック投稿者 bigsum

    (@goodwell)

    Hinaloe さんありがとうございます。
    言い訳をすると、色々迷って試しているうちにぐじゃぐじゃになってしまいました。

    以下のように直しましたが、まだPCでは消えません。
    スマホの方はこういう風に見えます。http://coolbon.boo.jp/rei.png

    同じこと過去にやったんですが、全然問題なかったです。今回何故こうなるのか全く分かりません。

    HTML

    <div align=”center”><img class=”pconly” src=”http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logo.png&#8221; alt=”” /></div>
    <div align=”center”><img class=”sonly” src=”http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logos.png&#8221; alt=”” /></div>

    <div align=”center”><img class=”sonly” src=”http://coolbon.boo.jp/wp-content/themes/twentytwelve/img/tel.png&#8221; border=”0″ alt=”” /></div>

    CSS

    @media screen and (max-width: 600px) {
    .pconly { display: none;}
    .sconly { display: inline;}

    @media only screen and (min-width: 601px) {
    .pconly { display: inline;}
    .sconly { display: none;}
    }

    <div style="width:955px" align="center" class="sonly"><img  src="http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logos.png" alt="" /></div>

    のようになっていますよ?(スマホで崩れるのはそれが原因の模様)
    PCの方はまだ確認してません…どうやらうまくいってないみたいだけど…

    (どっちにしてもdisplay:inlineはよくなさそう)

    あとminとmaxを600px,601pxにしてるので事実上「どちらでもない状態」がうまれてます。(px指定だからまぁ大丈夫だろうけど。)

    あとバリデータかけるといくつかエラー出てますね。

    トピック投稿者 bigsum

    (@goodwell)

    Hinaloeさんありがとうございます。
    <div style=”width:955px” align=”center” class=”sonly”>
    は、気づきませんでした。何度かheader部分はアップしているんですが、
    何で残っていたか分かりません。再度アップし直して、スマホは
    解決しました。
    PCは依然として、表示されてしまいます。
    @media only screen and (min-width: 601px) {
    }
    はそもそも設けていませんでした、max-width: 600px だけで、その前に
    .pconly { display: inline;}
    .sconly { display: none;}
    を設けていました。それでもダメでした。

    ご指摘のエラーですが、どれもtwentytwelveのテーマのデフォルトの状態で
    いじっていないところです。不思議です。

    該当の画像:

    <img class="sonly" src="http://ookubotest.lolipop.jp/fudou/wp-content/themes/twentytwelve/img/logos.png" alt="">

    classがsonlyになってますよね、noneしているのはsconlyのようですが、いずれかtypoじゃないですか?

    トピック投稿者 bigsum

    (@goodwell)

    Hinaloeさん
    すみません、そのようのでした。解決しましたありがとうございます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「隠した画像が表示され、画像サイズもバラバラ」には新たに返信することはできません。