ブログ

Amazonアソシエイトリンクボタンをオシャレにする方法-Nomad Code

こんにちは。ページを開いていただきありがとうございます。Toruです。

今回は初心者の方でも簡単でオシャレにできるAmazonアソシエイトリンクの張り方について紹介していきたいと思います。

ブログ運営をしている方なら感じたことあると思いますが、Amazonアソシエイトのリンクって使いづらいですよね。(笑) なんかデザインもダサいですし…。

このページを読み終えることにはオシャレなデザインで使いやすいアソシエイトリンクを使えるようになるので、ぜひ最後まで読んでみてください。

それでは行きましょう!

CVボックスのデザイン

普通に張ってみると・・・

さてそれでは本題の最終目標をお伝えしましょう。

Amazonアソシエイトリンクを普通に張ると以下のようになると思います。

めっちゃ使いずらいし何よりダサい・・・。

これすごく使いづらいですよね。デスクトップPCで見るとずっと左端にいるし、表示は小さいし。しかもダサいし。こんなのだれも押してくれないですよね。

ずっと使いづらくて僕もなにかいい方法がないかと探していました。

そしてついにオシャレになる方法を見つけました

見つけた最高にオシャレなデザインは次のようになります。

2021年大注目商品

MacBook Pro 13インチ スペースグレイ

2020年最新モデル

大注目のM1チップ搭載

RAM 8GB/SSD 256GB

10

デザイン

9

性能

8

使いやすさ

8

コスパ

 

 

いかがですか?さっきのよりも圧倒的にデザインがいいですよね!

いろいろな項目を10段階で評価できたり、読者に注目してほしい箇所をリストで伝えられたり。とても使い勝手が良いです。

これなら読者にも伝わりやすいですよね。

このCVボックスのデザインはどこのサイトにあるの?

Nomad Codeという超有能サイトにすべてあります

これはNomad Codeというサイトで紹介されています。

ほかにもボックスやリスト、ボタンなどシンプルなものからオシャレなものまで様々なHTML/CSSコードを無料で公開しています。興味がある方はこちらのサイトもご覧ください!

 

コピペでOK!即使えるHTML/CSSコード

それではこちらのHTML/CSSコードを張っておきますのでご自由にお使いください!(ちょっと長いけど…。)

このコードを張る場所については次の章でご紹介します。

HTML

CSS

とってもおすすめのキーボードがあります。詳しくはこちらの記事をご覧ください

HTML/CSSコードを張る場所

それではこれらのソースコードを張り方について一つずつ説明していきます。

HTML(AddQuicktagを使用)

HTMLには「AddQuicktag」というプラグインを使用します。インストールは簡単にできます。

・wordpressメニューから「プラグイン」→「新規追加」を選択します。

・検索欄に「AddQuicktag」と入力。そしてプラグインを「今すぐインストール」する。

・wordpressメニューに戻り、「設定」→「AddQuicktag」を選択します。

・①箇所にはボタン名を入力します。今回は「レビューボックス(青)」としました。②箇所にHTMLのコードを入力します。③箇所はすべてチェックします。(一番右をチェックするとすべてにチェックが入ります。)④箇所を押し準備は完了です。

・ここにボタン名が表示されれば完了です。

CSS

・wordpressメニューから「外観」→「カスタマイズ」を選択。

・「追加CSS」を選択

・先ほどのCSSコードをここに張り付ければ完了です。

まとめ

今回はAmazonの広告をオシャレにする方法について紹介しました。どうでしたか?コード自体は長いですが、設定さえ頑張ればあとは簡単にできてしまったと思います。

Nomad Codeでは他にも様々なコードを無料で紹介しています。興味がある方はぜひ利用してみてください。

また便利なコードがあれば紹介記事を書こうと思います。







ABOUT ME
Toru
24歳。会社資料の文章力を鍛えるためにブログ開設。機械学習・ディープラーニング勉強中。プログラミング、デバイス、PC、ガジェット類について紹介していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です