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

2025年1月6日

wordpressで楽天アフィリエイトを設置したはいいが特にスマホ表示だと要素をはみ出てしまって困っている方向けのテクニックとなります
楽天アフィリエイトでは「生成されたHTMLソースの中にタグを追加することは禁止」とされております
なので「CSS」で強引に対応します
このやり方も禁止だったらごめんなさい

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

HTMLコード
1 2 3	`<div` `class="rakuten-afi">` `ここに楽天アフィリエイトーのコードを入れます。` `</div>`

CSSコード.rakuten-afi {
}
.rakuten-afi > table {
    border: initial;
}
.rakuten-afi > table > tbody > tr > td {
    display: flex;
    justify-content: center;
    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;
}
 
/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
 
.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;
    justify-content: center !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;
}
    /*-- ここまで --*/
}

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43	`.rakuten-afi {` `}` `.rakuten-afi >` `table` `{` `border: initial;` `}` `.rakuten-afi >` `table` `> tbody > tr > td {` `display:` `flex;` `justify-content:` `center;` `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;` `}` `/media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ` `---------------------------------------------------------------------------------------------------/` `@media` `print,` `screen` `and (max-width:` `599px) {` `.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;` `justify-content:` `center` `!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;` `}` `/-- ここまで --/` `}`

comment コメントをキャンセル

: 【第2回】PHPの「変数」ってなに？はじめての変数入門

chatGPTに記事を書いてもらってます変数って聞いたことある？プログラミングでは「変数（へんすう）」という考え方がとっても大事です。変数とは、“値をしまっておける箱”のようなもの。たとえば、 ...

HTML PHP

: absoluteを使った画像と文字の重ね表示をマスターしよう！

Webデザインでは、画像の上に文字を重ねることで、視覚的に魅力的なレイアウトを作成することができます。これを実現するためには、CSSのposition: absolute;を活用するのが一般的です。 ...

CSS HTML

: 【第6回】ユーザーの入力を受け取ろう！はじめての「フォーム連携」

chatGPTに記事を書いてもらってます Webサイトでは、ユーザーに入力してもらうことがよくありますよね。名前やメールアドレスを入れてもらったり、検索したり… そのときに使うのがフォーム（for ...

HTML PHP

: サーチライトエフェクトで文字を強調するインタラクティブなデザイン

マウスやタッチ操作に応じてサーチライトが動き、指定された文字が強調されるインタラクティブなエフェクトを実装しています。マウスを動かすことでサーチライトが追従し、その部分だけが明るく照らされ、他の部分 ...

CSS HTML JavaScript

: 【第7回】入力はちゃんとチェックしよう！フォームのバリデーションと複数項目の処理

chatGPTに記事を書いてもらってます前回、PHPでフォームから入力を受け取る方法を学びましたね！でも、ユーザーが空っぽのまま送信してしまったら…？そんなときに必要なのが「バリデーション（入力 ...

HTML PHP

たった数行のCSSで作れる！おしゃれなボタンデザイン集

JavaScript不要！CSSだけで作るインタラクティブなUI

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

クラシックエディタ用のプラグインを作ってみた

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた