質問: 「このショップの人気商品ランキング」を好きな場所に表示させたい いつもお世話になっております。楽天既存プログラムで表示されている「このショップの人気商品ランキング」を好きな場所に表示させる事は可能でしょうか?出来る場合htmlやcssはどのように書けば良いでしょうか?よろしくお願いします!
回答: 田中さん★いつもありがとうございます!☆表示させる事は成功しました!https//www.rakuten.ne.jp/gold/shop-url/compass/sp/shop/sale2.htmlどうせならページデザインと統一しようと、コンパスのcssをコピーしてみてクラス名を書き換えたのですが、1枚目フォーラム2がコンパスのデザイン、コピーして書き換えてみたデザインが画像2のフォーラム1まるまるコピーしたのになんで??ってなっています。----*----*--元のコンパスのhtml--*----*---- 当店の人気アイテム 商品一覧を見る----*----*--あてはめてみたhtml--*----*---- 当店の人気アイテム 商品名:価格:評価平均:評価数:----*----*--元のコンパスのcss--*----*----#itemranking .ranking_wrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}#itemranking .ranking_item { width: 100%; max-width: 100%;}#itemranking .ranking_item { position: relative;}#itemranking .ranking_item a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; align-items: flex-start; padding: 8px 12px; width: initial;}#itemranking .item_rank { width: 24px; height: 24px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: absolute; top: 4px; left: 4px; background: #999999; color: #fff;}#itemranking .item_name { font-size: 16px;}#itemranking .item_name:before { content: url(../img/icon_ranking.png); margin-right: 4px;}#itemranking .item_rank { margin-bottom: 16px;}#itemranking .item_price { font-size: 16px; text-align: right;}----*----*--あてはめてみたcss--*----*----.rankinshop { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}.rankinshop_item { width: 100%; max-width: 100%; position: relative;}.rankinshop_item a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: flex-start; align-items: flex-start; padding: 8px 12px; width: initial;}.rankinshop_rank { width: 24px; height: 24px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: absolute; top: 4px; left: 4px; background: #999999; color: #fff;}.rankinshop_name { font-size: 16px;}.rankinshop_name { content: url(../img/icon_ranking.png); margin-right: 4px;}.rankinshop_rank { margin-bottom: 16px;}.rankinshop_displayprice { font-size: 16px; text-align: right;}----*----*----*----*----どうしたらコンパスのデザインみたいに配置出来ますか?よろしくお願いいたします。