ホーム / Bloggerの使い方 /

【もしもアフィリエイト】かんたんリンクをCSSコピペだけでカスタマイズする方法　

2019年8月20日

Bloggerの使い方

t f B! P L

ブロガーさん：ブログで商品を紹介したい。おしゃれなブログカードを作りたい。Bloggerでもできるのかな？

こんな悩みにお答えします。

結論から言うと、CSSのコピペでカスタマイズ可能です。記事の一番下に書いてあるコードをHTML編集欄の適当な箇所に貼り付けてください。Bloggerテンプレート【QooQ】の場合は、フッターなど適当な箇所に貼り付けてください。

この記事を読んでわかること
  • かんたんリンクって何？
  • もしもアフィリエイトって何？
  • かんたんリンクのカスタマイズ

かんたんリンクって何？

もしもアフィリエイトのかんたんリンクって何？って方はこちらをご覧ください。せっかちな方は、まずもしもアフィリエイトに登録してから、Amazonアソシエイト、楽天アフィリエイトと提携してください。ブログを始めたばかりでも、もしもアフィ経由だと審査は簡単に通過できますので初心者にもおすすめです。

完成図はこちら



もしもアフィリエイトって何？

大手のアフィリエイトサイトです。総合的に商品も多く、独自の追加報酬が魅力的で最大手のA8.net と一緒に登録しておくとアフィリエイトも捗ります。

ちなみにブログカードを作成するサイトとして有名なカエレバは、仕様変更によりAmazonから商品検索ができなくなりました。どういうことかと言うと、リンクを貼りたい商品が見つかりにくいと言うことです。これは、検索が楽天市場基準に変更になったためです。

そこで、カエレバの代わりになるかんたんリンクの登場です。実はカエレバよりも作りやすく、実際の操作は

  • 商品を検索
  • HTMLコードをコピー
  • HTML欄に貼り付け

この3ステップで完了です。
CSSも1度カスタマイズしておけばずっと使えるので、最初に設定することをおすすめしています。

もちろんデフォルトでも使えますのでまずは試したいと言う方は、もしもアフィリエイトのかんたんリンクをお気に入りに登録しておくと作業が捗りますよ。

かんたんリンクのカスタマイズ

以下のコードをHTML編集欄に貼り付けてください。Bloggerの方は、【テーマ】-【HTML編集】から任意の箇所に貼り付けてください。どこに貼り付けていいかわからない方は、<body>のすぐ下などに貼り付けてください。やる前に不安な方は、必ずバックアップを取っておいてくださいね。

コードは以下のサイトを参考に、Blogger向けにカスタマイズしています。
参考サイトはこちら

CSSコード。以下を全て貼り付け

CSS

/* ------------------------------------- */
/*       かんたんリンク カスタマイズ     */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}

/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}

/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
    background: #f6a306 !important; /* 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-rakuten {
    background: #cf4944 !important; /* 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-yahoo {
    background: #51a7e8 !important; /* 背景色 */
    border: 2px solid #51a7e8 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}

/* --- PC以外の時の設定 --- */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 180px !important; /* 商品画像の大きさを調整 */
}
}

以上です。

QooQ