表のレスポンシブ化で楽天商品リンク（A8net）の表示が崩れます - CSSカスタマイズ相談

RE: 表のレスポンシブ化で楽天商品リンク（A8net）の表示が崩れます

NasuNozoMizuho — Tue, 26 Mar 2019 14:05:27 +0000

かうたっく様

PC版・スマホ版ともにもとの表示に戻りました。

ありがとうございました。

RE: 表のレスポンシブ化で楽天商品リンク（A8net）の表示が崩れます

かうたっく — Tue, 26 Mar 2019 07:58:19 +0000

.hoge .scrollable-table td {
	white-space: normal;
}
.hoge .scrollable-table table {
	width: 100% !important;
}
.hoge .scrollable-table tr > td {
	width: 138px !important;
}
.hoge .scrollable-table tr > td + td {
	width: calc(100% - 138px) !important;
}

cssは上記のような感じです。

A8netの楽天商品リンクって、tableタグから始まる感じですかね？もしそうであれば、以下のようにdivで囲めば反映すると思います。

<
div class・・・となってますが、改行をとってくださいね。

<
div class="hoge">
ここにa8楽天tableタグをはる
<
/div>

表のレスポンシブ化で楽天商品リンク（A8net）の表示が崩れます

NasuNozoMizuho — Mon, 25 Mar 2019 16:56:10 +0000

お世話になります。

先日からCocoonにテーマ変更して大変満足しているのですが、一点だけ困ったことがあります。

Cocoon設定から「表のレスポンシブテーブル」で横スクロールを有効化してみたのですが、それによってA8netで生成した楽天商品リンクが崩れてしまう事がわかりました。

A8netの楽天商品リンクが表で構成されていることが要因ですが、無駄に横長になり、商品写真が表示されなくなってしまっております。

例：https://tetsupara.net/archives/1723

表の横スクロールを有効にしつつ、A8netの楽天商品リンクを崩させないような設定やタグの打ち方などご存知ではないでしょうか？

Cocoonのテーマ機能やカエレバの商品リンクに乗り換えても良いんですが、Amazonアソシエイトの設定の方でうまく行かず、Amazonと楽天（A8）は公式のリンクをそのまま使っている状態です。

20190326_003750.jpeg