サポート » 使い方全般 » スマホで見た時の画像回り込みについて

  • お世話になります。

    レスポンシブル対応のテーマで固定ページで自己PRのページを作成しています。

    ———– テキストテキストテキストテキストテキスト。
          テキストテキス。
          テキストテキストテキスト。
    画像 テキストテキストテキスト。
          テキストテキストテキスト。
          テキストテキストテキスト。
    ———– テキストテキストテキストテキストテキスト。

    上記のように左に画像、左回り込みでテキストを配置しています。

    PCで見るのは問題はないのですが、iphoneだと以下のようになります。

    ———– テキスト
          テキスト
          テキスト
    画像 テキスト
          テキスト。
          。テキス
    ———– テキスト。
    テキストテキストテキスト。
    テキストテキストテキスト。

    画像の右端にテキストが数文字で改行されています。

    PC表示はそのままに、iphoneで見た時は
    ———–
          
          
    画像
          
          
    ———–
    テキストテキストテキスト。
    テキストテキストテキスト。

    この様に画像の下にテキストが来る様にするにはどうしたらいのでしょうか?

    自己PRページのこの部分だけの問題なのですが、どうしたらいいのか分かりません。
    よろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは。こちらCSSの問題になります。
    iPhoneで見る際のCSSで回りこみを解除すれば画像の下にテキストが来るようになります。
    該当部分のタグとCSSを具体的に教えて頂ければ、もう少し詳しくアドバイスできるかと思います。

    トピック投稿者 JUNKO007

    (@junko007)

    Junko Nukaga様

    お世話になります。

    該当部分は以下になります。

    <img src=”http://www.xxx.com/wp-content/uploads/2014/09/xxx.jpg&#8221; alt=”写真の説明” width=”199″ height=”300″ class=”alignright size-medium wp-image-175″ />

    いたって普通?に「メディアを追加」で画像を入れています。
    その画像を選択し、回り込みをさせているだけです。

    スタイルシートは3つあり、
    ・style.css
    ・style_pc.css
    ・style_sp.cssとなっています。

    alignrightが回り込みのことかと思い検索しました。

    ■style.css

    .alignright { float:right; }
    .alignleft { float:left; }
    .aligncenter { margin-left:auto; margin-right:auto; }
    .centered { margin-left:auto; margin-right:auto; }
    .clear { clear:both; }
    input[type="text"], input[type="password"], textarea, select { outline: none; }
    
    /* --- WordPress preset CSS ----------------------------------------------------------------------------------------- */
    
    /* image */
    .post img { height:auto; max-width:100%; width:auto; }
    .post img.centered,div.centered { display:block; margin:15px auto; }
    .post img.aligncenter,div.aligncenter { display:block; margin:15px auto; }
    .post img.alignright,div.alignright { margin:30px 0 10px 30px; display:inline; }

    「alignright」はstyle.cssにしかありませんでした。

    こちらでよろしいでしょうか?
    よろしくお願いします。

    予想ですが

    style_sp.cssに

    .alignright { float:none; }

    を記述で解決です。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「スマホで見た時の画像回り込みについて」には新たに返信することはできません。