WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › ウィジェットのCSSを修正・追加してほしい

  • widgetマスター

    モデレータ
    2024年1月22日 11:46

    ご相談ありがとうございます！

    確認します🙌

  • widgetマスター

    モデレータ
    2024年1月22日 12:00

    1点確認させてください！

    下記依頼ですが、やりたいこととしてはこちらの画像の様にするであっていますでしょうか・・・？

    画像：https://squadbeyond.gyazo.com/517da39ed54881253bb641498875a96d

    【ご相談内容②（CSSの追加）】
    〈商品評価とランキングの表（横スク対応）(表)〉という既存widjetの王冠画像（画像4の部分）を、4位以下の場合は黒い色の王冠になるようにして、画像5の青く囲った部分に追加していただきたいです。

    • karen

      メンバー
      2024年1月22日 13:04

      送っていただいた画像の通りで間違いないです！ランキング形式のサイトにしたく、4位以降も王冠をつけたいと考えています…！

    • widgetマスター

      モデレータ
      2024年1月22日 13:08

      ご確認ありがとうございます！

      かしこまりました🙏

  • widgetマスター

    モデレータ
    2024年1月26日 13:09

    お待たせいたしました！

    【ご相談内容①(CSSの修正)】「1.画像1の箇所で、文字の色を変えると画像2のように改行されてしまうので改行されないように修正していただきたいです。」の修正が完了しました！

    widgetを入れ直していただければと思います！

    もし今のままで修正したい場合は下記コードをご参考ください！

    CSS修正箇所

    

    283行目
 .product__point-list {
  /*display: grid;
  gap: 0.75em; 削除*/
  font-weight: bold;
  color: #000;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product__point-list li {
  /*display: flex;
  align-items: center;
  gap: 10px;
削除*/
  position: relative;/*追加*/
  padding-left: 25px;/*追加*/
}

 .product__point-list li+li {/*3行追加*/
  margin-top: 10px;
}

 .product__point-list li .mark {
  /*display: flex;
  align-items: center;
  gap: 5px;
  position: relative;削除*/
  position: absolute; /*追加*/
  top: 5px;
  left: 0;
}
    

			
    
						
    			
    
				
    
			
			
    
    

    • 

  • 


    
			
						
  
    

      
    
				      
    

      
    

        
    
					widgetマスター				
    

				
    モデレータ
    
        2024年1月26日 13:11

				
			
    

		    
    
    
    
			    
    
    
    
						
    【ご相談内容①(CSSの修正)】「2.画像3の表部分のタイトル部分（会員数やポイントレートと書かれている部分）を少し広くして、スマホで見た際に綺麗に収まるようにサイズ調整をしていただきたいです。」の案内もさせていただきます！
    


    

    下記コードをCSSに追加
    

    

    @media screen and (max-width: 550px) {

	/* ① 表全体のテキストサイズを少し小さく */
	.ranking-frame-table {
		  font-size: 0.8em; /* ← 数値はお好みで調整して下さい */
	}

	/* ②表タイトルの幅を任意のサイズに調整 */
	.ranking-frame-table th {
		  width: 40%; /* ← 数値はお好みで調整して下さい */
	}

}
    

			
    
						
    			
    
				
    
			
			
    
    

    • 

  • 


    
			
						
  
    

      
    
				      
    

      
    

        
    
					widgetマスター				
    

				
    モデレータ
    
        2024年1月26日 13:13

				
			
    

		    
    
    
    
			    
    
    
    
						
    【ご相談内容②（CSSの追加）】こちらの作成も完了しました！
    

    ———-
    

    Widget名: 商品評価とランキングの表（横スク対応）
    

    カテゴリ: 表
    

    設置例 : https://sb-draft-preview.squadbeyond.com/articles/wKIezhftiyizzhSMJCeA/draft?token=f58b13e1d39875dbd1ca3a05aa76d616
    

    ———-
    

			
    
						
    			
    
				
    
			
			
    
    

    

    • 








	

	





				

											
									

				

									

				


	


			
			



		


		

			

				

					

													
											

					

										

									


								

					
						
							
						
						ディスカッションの始まり
					
					

						

							0 / 0 コメント							2018年6月
						

					

					
						
							
						
						今
					
				

			

		


	




	


	



			
	


















	








	

		

			

				

					
報告 

					
				

								

					


														

									
									Harassment or bullying behavior
								

																

									
									Contains mature or sensitive content
								

																

									
									Contains misleading or false information
								

																

									
									Contains abusive or derogatory content
								

																

									
									Contains spam, fake content or potential malware
								

								
						

							
						

						

							
						

						

							
							
							
							
							
						

					

					

				

			

		

	







	

			

				

					

						
ブロックメンバー？

						
					


					

						

							このメンバーをブロックすることを確認してください。						

						

							次のことができなくなります。						

						
    
														
  • 
								ブロックされたメンバーの投稿を見る							
    • 
														
  • 
								投稿でこのメンバーをメンションする							
    • 
																											


						

							
							このプロセスが完了するまで数分お待ちください。						

						

							

								
								
								
								
								
							

						

												

					


				

			

	







	

		

			

				

					

						報告 					

					
				


				

					あなたはすでにこれを報告しました