PC用販売説明文に検索キーワードを表で入れたい

Question

お世話になります。
PC用販売説明文に、「添付しました表」で
検索キーワードを差し込みたい。

「添付しました表」を作製する
HTMLタグをお教えいただけますか。

よろしくお願いいたします。###HR######IMG046e0d1d822d04b9a19ccf6653400ff26.jpegIMG0###

Answer

ECマスターズの伊藤です。

> 「添付しました表」を作製する
> HTMLタグをお教えいただけますか。

HTMLだけでは作成が難しかったため、
CSSも使用して作成いたしました。

下記を商品説明文に入れていただければ、
実装いただけると思います。

ご不明な点はご質問くださいませ。



  ■テキストテキスト
  テキストテキスト
  
    
      種類
    
    
      AAAAAAAAAA
    
  
  
    
      種類
    
    
      AAAAAAAAAA
    
  
  
    
      種類種類
    
    
      AAAAAAAAAA
    
  
  
    
      種類
    
    
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    
  
  
    
      種類
    
    
      AAAAAAAAAA
    
  
  
    
      種類種類
    
    
      AAAAAAAAAA
    
  


  /* 検索ワード全体を囲う枠 */
  .word_list{
    display:flex;
    flex-wrap: wrap;
  }
  .word_list *{
    box-sizing: border-box;
  }
  /* ■の見出し */
  .word_list h2{
    margin:0;
    padding:0;
    border-top:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    width: 100%;
  }
  /* 見出し下テキスト */
  .word_list > p{
    text-align: center;
    width: 100%;
  }
  /* 6つの枠 */
  .word_list > div{
    margin:5px;
    padding:0px 5px;
    width:calc((100% / 3) - 10px);
    border:1px solid #cccccc;
  }
  /* 6つの枠  見出し */  
  .word_list > div h3{
    margin:0;
    padding:0;
    border-bottom:1px dotted #cccccc;
  }

Answer

伊藤さま　
(人''▽｀)ありがとう☆ございます。
こんな早くお返事がくるとは思っていませんでしたのでびっくりです。
本当にありがとうざいます。

まだキーワードが完成していないのですが、
早速「PC用販売説明文」にいれてみました。

表はちゃんとできていますが、
店看板や検索窓・イベント告知が横に伸びているために
横長の表になります。

店看板等がを通常に戻れば　
そのまま使えると思います。

私のサイト作成の際のタグが怪しい所為だと思いますが
タグが干渉しいるようです。
改善点をお教えいただけますとありがたく思います。

間延びした店看板や検索窓・イベント告知と、表部分の
画像を添付いたしました。

よろしくお願いいたしますm(__)m###HR######IMG03b3e0a8b61853371be2205178cb86503.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

> 表はちゃんとできていますが、
> 店看板や検索窓・イベント告知が横に伸びているために
> 横長の表になります。

早速のご確認、ありがとうございます。

表が横に伸びてしまう件ですが、
実際のページを拝見させていただきたいと思いますので、
コードを設置したページの商品管理番号（商品URL）を
ご教示いただけますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

伊藤さま
早速の返信ありがとうございます！

お送りしました商品アドレスです。
↓↓↓
https://item.rakuten.co.jp/clarena/clc_kimono_2111/


伊藤さんがお送りいただきましたタグを入れますと
チッェクした限りでは、この商品ページに限らず
みんな間延びになります。
よろしくお願いいたします！

Answer

ECマスターズの伊藤です。

> 伊藤さんがお送りいただきましたタグを入れますと
> チッェクした限りでは、この商品ページに限らず
> みんな間延びになります。

URLのご連絡ありがとうございました。

確認したところ、IE11のバグのようでしたので、
一部コードを修正いたしました。

お手数ですが、下記の内容に、変更いただき、
改めてご確認をお願いいたします。



■クラレナの打掛は様々なご用途でご利用いただいております。
※希望のご用途に対応できないことも含まれています。予めご了承下さい。


種類


打掛 色打掛 白打掛 白無垢 打掛白 掛下長襦袢 掛下帯 
和装 洋装 引き振袖 黒引き お色直し 引き振り袖 打掛 
髪飾り 十二単風 八重重ね 袿うちき仕立て




お使い方法


販売 購入 色打掛レンタル 結婚式レンタル 着物レンタル 
貸衣装 貸衣裳 買取り オーダー打掛 仮装 コスプレ 海外みやげ 




別名


打掛 錠 打掛金具 門扉 取っ手 打掛ベルト
    打掛鍵 打掛錠 読み方




☆☆


☆☆




☆☆

☆




☆☆☆☆


☆





/* 検索ワード全体を囲う枠 */
.word_list *{
box-sizing: border-box;
}
/* ■の見出し */
.word_list h2{
margin:0;
padding:0;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
width: 100%;
}
/* 見出し下テキスト */
.word_list > p{
text-align: center;
width: 100%;
}
/* 6つの枠 */
.word_list > div{
display:flex;
flex-wrap: wrap;
}
.word_list > div > div{
margin:5px;
padding:0px 5px;
width:calc((100% / 3) - 12px);
border:1px solid #cccccc;
}
/* 6つの枠  見出し */    
.word_list > div h3{
margin:0;
padding:0;
border-bottom:1px dotted #cccccc;
}

Answer

伊藤さま☆
迅速な改善をありがとうございます！

ちゃんと通常の状態になりました！
お陰で各商品ごとにキーワードを入れることができます。

感謝です！本当に(*^-^*)ありがとうございます☆

Answer

伊藤様

色々とご教授ありがとうございます。
同件の内容でまたご質問いたします。

お教えいただきましたタグを活用したのですが、
やはり看板＋表が横伸びになり正常な表示になりません。

現在タグ入り商品です。
↓↓↓
https://item.rakuten.co.jp/clarena/cl_kimono2152/

ルタオの表が参考になっています。
全ての商品にこの表でキーワードを入れたいと思いますので
お手数をおかけいたしますがよろしくお願いいたします。###HR######IMG0f3a9894bda5ef99022e857d3b3422e89.jpegIMG0######BR###

Answer

ECマスターズの海老塚です。

いただいたご質問ですが
担当より、明日ご連絡させていただきます。

恐れ入りますが、ご回答まで今しばらくお待ちいただきますよう、
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> お教えいただきましたタグを活用したのですが、
> やはり看板＋表が横伸びになり正常な表示になりません。

度々お手数おかけして申し訳ありません。
IE11ですと、table(楽天の全体がtableで作成されています)の
横幅を取得することができず、横に伸びてしまうようです。

枠に横幅を指定していただければ、
回避することができると思いますので、
下記にwidth:800;を追加いただけますでしょうか。

/* 6つの枠 */
.word_list > div{
display:flex;
flex-wrap: wrap;
}

↓↓

/* 6つの枠 */
.word_list > div{
display:flex;
flex-wrap: wrap;
width:800px;
}

Answer

ECマスターズ
　　伊藤　様

ご教授いただきまして本当にありがとうございます。
理想の表枠になりました！！
感謝々です！
ありがとうございます！！