WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › widget内の画像の位置を変更したい
タグ付き: widget, ランキング(星評価・バナー画像・ボタン)
-
widget内の画像の位置を変更したい
トピックス by widget初心者 1792 pt 2023年12月7日 15:29 208 PV【相談内容】
画像を右下に移動させる方法が知りたいです!
【相談ページ】
https://sb.nandemochousatai.com/ab/kinnin_rank_1
【Widget】
ランキング(星評価・バナー画像・ボタン)
widgetマスター 11 月, 2 数週間前 2 人 · 1 コメント -
1 コメント
-
以下のように修正してみてください!
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: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", 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: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", 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%;
}
移動した会社名&商品名には適宜装飾をしてください!
よろしくお願いいたします!