【コピペのみ】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です

参考

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

関連記事

あわせて読みたい
【学生のうちに登録しておくべきこと】AmazonPrimeStudent 学生のうちにAmazonPrimeに入ったほうがよい?どんなメリットがあるのかな? そんな人に向けた記事です 結論、学生のうちに必ず入っておいた方が良いです 無料で6カ月...
あわせて読みたい
マーケティングについて勉強したい大学生にオススメの本やサイト マーケティングを学びたい大学生 マーケティングについて理論を知りたい そんな人に向けた記事です この記事では主にデジタルマーケティングやランディングページでのマ...
あわせて読みたい
【パソコン作業で肩や首コリに悩まれている方へ】PCスタンドは必須です パソコン作業が多い人向けに私の使っているPCスタンドをご紹介したいと思います 私はPCスタンドを買う前まではPCスタンドはなしで作業をしていたので首のコリが痛くて作...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる