widget内の画像の位置を変更したい | コミュニティ

タグ付き： widget, ランキング（星評価・バナー画像・ボタン）

コミュニティ

widget内の画像の位置を変更したい

トピックス by widget初心者 1792 pt 2023年12月7日 15:29 209 PV
【相談内容】

画像を右下に移動させる方法が知りたいです！

【相談ページ】

https://sb.nandemochousatai.com/ab/kinnin_rank_1

【Widget】

ランキング（星評価・バナー画像・ボタン）
ランキング.png 143 KB 画像ファイル — クリックして見る



コピーダウンロードリンク
widgetマスター 11 月, 3 数週間前 2 人 · 1 コメント
- widget
- ランキング（星評価・バナー画像・ボタン）
1 コメント

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

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

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