WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ widget内の画像の位置を変更したい

  • widgetマスター

    モデレータ
    2023年12月7日 15:42

    以下のように修正してみてください!

    HTML

    ①記述を追加する

    https://t.gyazo.com/teams/squadbeyond/a7cbd0811de06cab2a085c8fa0b7ed60.png

    【変更前】

    
    
    <div class="ranking-item-wrap">
     <div class=ranking-item-ratings">
      <div class="title">
       <img src="商品画像">
      </div>
     </div>
    </div>

    【変更後】

    
    
    <div class="ranking-item-wrap">
     <div class=ranking-item-ratings">
      <div class="title">
       <div class="head__box">
        <p class="companyName">アイリンクス株式会社</p>
        <p class="mainHead">きんいん</p>
       </div>
       <img src="商品画像">
      </div>
     </div>
    </div>

    ②記述を削除する

    https://t.gyazo.com/teams/squadbeyond/6bd32d8747d295dc9db9748a8e46ec6b.png

    【削除する記述】

    <p class="company-name" style="padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-weight: bold; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans&quot;, &quot;Hiragino Kaku Gothic ProN&quot;, Arial, &quot;Yu Gothic&quot;, Meiryo, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; color: rgb(87, 52, 39); text-align: start;"><span style="font-size: 20px;" class="sb-fs-free">アイリンクス株式会社</span></p>

    <h3 class="mainTitle" style="margin: 0px 0px 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-stretch: inherit; font-size: 4.2rem; line-height: inherit; font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans&quot;, &quot;Hiragino Kaku Gothic ProN&quot;, Arial, &quot;Yu Gothic&quot;, Meiryo, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; color: rgb(87, 52, 39); text-align: start;"><span style="font-size: 20px;" class="sb-fs-free">きんいん</span></h3>

    CSS

    記述を追加する

    https://t.gyazo.com/teams/squadbeyond/5d7b878c394635aa4394a576bd533850.png

    【変更前】

    .ranking-item-ratings .title {

    font-size: 1.4em;

    font-weight: 600;

    }

    【変更後】

    .ranking-item-ratings .title {

    font-size: 1.4em;

    font-weight: 600;

    display: flex;

    justify-content:space-between;

    align-items: center;

    }

    .ranking-item-ratings .head__box {

    width: 65%

    }

    .ranking-item-ratings .title img {

    max-width: 30%;

    }

    プレビュー:https://sb-draft-preview.squadbeyond.com/articles/VSEynSNqgTbgDwFvZw/draft?token=04864aaa6a5569333499873b15a6d8d3

    移動した会社名&商品名には適宜装飾をしてください!

    よろしくお願いいたします!