【コピペのみ】Amazonのリンクをいい感じにワードプレスに貼る方法

上のようにワードプレスでAmazonや楽天のリンクを貼った時にいい感じに表示する方法を紹介したいと思います

以下のソースコードを張り付ければOK

以下のHTML/CSSをワードプレスに張り付ければOKです

See the Pen ShopLink by しもむらともき (@shimo_tmk) on CodePen.

ワードプレスの張り付け方

①追加CSSを変更する場合

ワードプレスの管理画面＞外観＞カスタイズを選びます

そしたらこんな感じの画面になると思うので左下の「追加CSS」をクリックします

そしたら先ほどのCSSのコード
（「/**********
Amazonリンク
**********/」から始まるものをコピペして貼り付けます

上の方にある「公開」ボタンを押して「公開済み」になれば準備OKです

②テーマエディターのCSSを変更する場合

ワードプレスの管理画面＞外観＞テーマエディター＞スタイルシート (style.css)

を選びます

そしたら先ほどのCSSのコード
（「/**********
Amazonリンク
**********/」から始まるものをコピペして貼り付けます

そうしたら、下の方にある「ファイルを更新」ボタンを押したら準備OKです

記事内にHTMLを書く

下準備が終わったら記事を書いたときにHTMLを書きます

ブロックの検索などから「カスタムHTML」を選択して挿入します

入れたいリンクなどの情報を入れればいい感じに表示されます

リンクをいい感じにして売り上げを上げたいですね！

もし、楽天などのリンクを無くしたいなら「<div」から次の「</div>」までを削除すればOKです

参考

あわせて読みたい

アフィリエイト歴５年の僕が愛用するブログツール【ランキング紹介】 「ブログアフィリエイトにオススメなツールを知りたいなぁ。上級者が愛用しているツールは何だろう。」←こういった疑問に答えます。本記事では、ブログアフィリエイト歴５...

関連記事