広告ウィジェットに入れた画像をレスポンシブ表示したい

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 広告ウィジェットに入れた画像をレスポンシブ表示したい

  • このトピックには4件の返信、2人の参加者があり、最後にPOPOPOにより11年、 4ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #27524
      POPOPO
      ゲスト

      お世話になっております。
      ウィジェットに表示する画像のレスポンシブについて質問です。

      投稿本文中や投稿SNSボタン上下のウィジェットにアドセンス広告のような336*280の大きさの画像を横に並べて置いています。
      見よう見まねで

      <div class=”ad-article-bottom ad-space”>
      <div class=”ad-left ad-pc adsense-336″>
      画像
      </div>
      <div class=”ad-right ad-pc adsense-336″>
      画像
      </div>
      </div>
      <div class=”clear”></div>

      このように設置しています。
      ad-article-footer.phpから拾ってきたものです。

      PC上では左右きれいに並びますが
      スマホ上では上下には並びますが画像の大きさが可変しないことと
      上下の位置が少し左右にずれてしまいます。

      cssで画像幅を max-width: 100%;で指定していますが変化はありません。

      どうぞよろしくお願いいたします。

    • #27529
      アバター画像わいひら
      キーマスター

      上記の情報だけでは、スタイルシートの何が影響してそのようになっているかはわからないので、そのページのURLを貼っていただいて、ソースをみないとわからないかもしれません。

      ただ、代替案としてSimplicityの「パソコン用ウィジェット」と「モバイル用意ジェット」を使うという手もあります。
      パソコン用をウィジェットに、上記のコードを入力し、モバイル用ウィジェットにモバイルで表示したいタグを入力してください。
      よほど、変なスタイル指定をしていない限りは、画像はレスポンシブ表示されると思います。

    • #27531
      POPOPO
      ゲスト

      ありがとうございます。
      解決いたしました。
      ウィジェットにPC用とモバイル用があるのを知りませんでした。

      既出かもしれませんがもうひとつよろしいでしょうか
      投稿本文中ウィジェットの<h2>指定を<!–more–>に変更するにはどうしたらよろしいでしょうか。

    • #27533
      アバター画像わいひら
      キーマスター

      申し訳ないですが、新しくトピックを立ててもらって良いですか?

    • #27534
      POPOPO
      ゲスト

      はい

4件の返信スレッドを表示中
  • トピック「広告ウィジェットに入れた画像をレスポンシブ表示したい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)