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

参考

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

関連記事

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

この記事を書いた人

プログラミング・ブログを愛しています
普通の学生→リゾバなどで100万円以上貯金→WEB系フリーランスエンジニアの経験を活かし高校生から大人まで100人以上にプログラミングを教え電子書籍でAmazon WEB構築ランキング1位amzn.to/38uSpS0|YouTube bit.ly/32073OZ

目次
閉じる