楽天アフィリエイトをスマホで綺麗に表示させる方法

補足：スマホのCSSを編集できる環境が必要です

その1:CSSで体裁を整える

wordpressで楽天アフィリエイトを設置したはいいがスマホ表示だと要素をはみ出てしまって困っている方向けのテクニックとなります

検証だとはみ出ないんですよね。実機だとはみ出るですよね

楽天アフィリエイトでは「生成されたHTMLソースの中にタグを追加することは禁止」とされております

なので「CSS」で対応します

スマホ用のメディアクエリは各自設定してください

以下CSSコードになります

/* 全体に反映する設定部分 */
.rakuten-afi {
}
.rakuten-afi > table {
	border: initial;
}
.rakuten-afi > table > tbody > tr > td {
	border: initial;
}
.rakuten-afi > table > tbody > tr > td > div > table {
	border: initial;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td {
	border: initial ;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td > p {
    font-size: 24px !important;
}

/* メディアクエリでスマホだけ対応部分 */
.rakuten-afi > table > tbody > tr > td > div {
	width: 97% !important;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td {
	display: flex !important;
	flex-wrap: wrap !important;
	width: 99% !important;
	box-sizing: border-box !important;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td > p {
    font-size: 16px !important;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td > div > a > div {
	width: initial !important;
	margin-left: 20px !important;
}

あとは「rakuten-afi」を「div」にclass設定して囲みます

<div class="rakuten-afi">
    // ここに楽天アフィリエイトコードを入れる
</div>

どうでしょう。実機でも綺麗に収まるようになったのではないでしょうか

その2：スクロールバーを表示して対応させる

もう一つの方法は、スクロールバーを追加する方法です

以下CSSコードになります

.scrollable-box {
    overflow: auto; /* スクロールバーを表示 */
}

このクラスを[div]に設定し囲ってしまえば完了です

<div class="scrollable-box">
    // ここに楽天アフィリエイトコードを入れる
</div>

スクロールバーが表示されはみ出なくなりましたでしょうか

以上、楽天アフィリエイトをスマホで綺麗に表示させる方法でした(*^▽^*)

【中古】 楽天アフィリエイト実践テクニックガイド 楽天公認 / 酒井 洋和, 藍玉(小林智子) / インプレス [単行本]【メール便送料無料】【あす楽対応】 価格：579円（税込、送料別) (2023/10/22時点) 楽天で購入