モバイル用の画像

このトピックには6件の返信が含まれ、2人の参加者がいます。1 ヶ月前 カナワ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60668

    カナワ

    PCではブログの投稿画像は左寄せで文章が右側に回るようにしましたが
    スマホだと表示された画像の右側に寄った文章が2文字になり読みにくいため、
    モバイルには投稿画像を中心に位置させ
    文章は新たな段落で始まるように設定をしようと考えています。

    モバイルのソースを見てもかなり複雑で画像のクラスが良く分からないので
    単純にモバイルの画像が全部中央にするしかないかなと思い
    Simplicity2 childの「mobile.css」に以下のスタイルを記入してみました。

    img {display: block; margin-left : auto ; margin-right : auto ;}

    案の定全く効果はありません。

    モバイルの投稿画像だけにCSSを適応させるにはどのようにしたらよいのでしょうか?

    ワードプレス、CSSは1カ月前に勉強を始めたばかりで
    難しい知識はまだありませんが
    よろしくお願いいたします。

  • #60670
    わいひら
    わいひら
    キーマスター

    CSSセレクターを以下のようにするとどうでしょうか。
    .article img

    ただ、Simplicityはいろいろな設定があります。
    設定によっては上記ではCSSが効かない可能性があるので、うまくいかない場合は、できればカスタマイズ対象のURLを貼り付けていただければと思います。

  • #60671

    カナワ

    早速のアドバイスありがとうございます。

    Simplicity2 childの「mobile.css」をアドバイスのように書き加えてみたのですが駄目でした。
    .article img {display: block; margin-left : auto ; margin-right : auto ;}

    カスタマイズ対象のURLは以下になります。
    http://ema.moo.jp/2018/08/19/post-125/

    PCで見ると整って見えるのですが、スマホで見ると画像と文章のバランスが悪くなってしまいます。

  • #60673

    Akira

    まず、子テーマをインストールします。

    子テーマをお使いにならないと、Simplicity のアップデート適用時に、施したカスタマイズがすべて白紙に戻ってしまいます。

    次に、子テーマの style.css に、下記の CSS を追加します。

    @media screen and (max-width: 600px) {
      img.alignleft {
        display: block;
        float: none;
      }
    }

    これで端末の横幅が 600px 以下の場合に、テキストが画像を回り込まないようになります。

  • #60674

    カナワ

    丁寧なご回答ありがとうございます。

    教えていただいたcssを子テーマのstyle.cssに追加してみましたが
    変化はありません。
    スマホのキャッシュはクリアして確認しています。
    念のためにmobile.css、responsive.cssにも同じように書き込んで見たのですが駄目です。

    もっと簡単なものかと思ったら1,2カ月の勉強で何とかなる
    レベルではないことがよく分かりました。
    ゆっくり勉強して覚えていくしかありませんね。

  • #60675

    Akira

    子テーマをインストール後に、子テーマを有効化されたでしょうか。

    現在のカナワさんのサイトでは、子テーマが使われていないです。

  • #60677

    カナワ

    Akira 様

    解決できました。

    一番最初に子テーマを有効にしたと思っていたのですが
    全く気づきませんでした。

    一つの間違いで問題が発生したりうまく表示されなかったり
    ワードプレスは余程根気よく勉強しないと
    自分で解決できるようにはならないと痛感しました。

    本当に助かりました。再度お礼申し上げます。

トピック「モバイル用の画像」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)