もしもアフィリエイトのかんたんリンク機能を使うと、
アマゾン、楽天、ヤフーショッピングのアフィリエイトリンクを簡単に一括作成することができます。
しかし、見栄えがイマイチだったので、cssでカスタマイズしました。
CSSカスタマイズ後の「かんたんリンク」は以下のようになります。
cssをご紹介しますので、もし気に入ったらご利用ください。
という方は以下の記事もご覧ください。
もしもアフィリエイトの「かんたんリンク」をcssでカスタマイズ
もしもアフィリエイトのかんたんリンクの残念なところ
もしもアフィリエイト
が提供しているかんたんリンクは、
手軽にアマゾンや楽天のアフィリエイトリンクを貼れる素晴らしい機能です。
カスタマイズをしなくても以下のようなアフィリエイトリンクを数クリックで作成できます。
かんたんリンクの詳細は「手間いらず！amazonと楽天の両方のアフィリエイトリンクを一括で貼る方法！」も合わせてご覧ください。
もしもアフィリエイトはこちらから
しかし残念な点が一つだけ。
他社への忖度があったのかもしれませんが、何故このデザインを採用したのか不思議なくらいです。
リンクカードが全体的に大きい
商品名が目立たない
ボタンの色がオレンジ一色
「Yahoo!ショッピングで見る」が2行になる
スマホ表示の時が縦長すぎる
「Yahoo!ショッピングで見る」が2行になるについては、こんな感じです。
スマホ表示の時が縦長すぎるについてはこんな感じです。
スマホ画面全体がリンクカードで占拠されます。
これらは全てビジュアルで解決できる内容です。
そこでこれらの点を改善すべくCSSでカスタマイズしてみました。
■■カスタマイズしたCSS■■
CSSカスタマイズ後の「かんたんリンク」は以下のようになります。
スマホ版はこんな感じです。
上でご紹介したリンクカードに変更したい場合は、
以下のCSSを「style.css」にコピペするだけで使えるようになります。
また、一度style.cssにコピペした後は、
従来通りにかんたんリンクをブログに貼り付ければカスタマイズした内容が反映されます。
反映前にバックアップを取ってください
子テーマにコピペしてください
使用しているテーマによっては反映されないかもしれません
設定は自己責任でお願いします
See the Pen
zYvKqyq by イチ (@ichinomemo)
on CodePen.
オリジナルとの変更点
主な変更点は以下の通りです。
タイトル
文字色を変更
太字
ボタン
色を変更
横長に変更
縦３行配置
外枠に影を追加
マウスオーバー時に色を変更
その他
メーカー名を非表示
型番を非表示
外枠に影を追加
スマホ時の画像サイズ変更
リンクカード全体を縮小
CSSをさらにカスタマイズしたい場合は
全体の大きさ
全体の縮尺を変えたい場合は、
/* 全体 */というところにある、
transform: scale(0.8, 0.8); /* 全体を小さく表示 */
のscaleの数字を調整してください。
（現在は0.8）
文字色の変更
色を変更したい場合は、
修正したい行に記載の#(6ケタの英数字)を好みの色コードに変更してください。
メーカーと型番について
カードのサイズ（特にスマホ版）を小さくするために、メーカーと型番を非表示にしています。
表示させたい場合は、
See the Pen
abvmNYN by イチ (@ichinomemo)
on CodePen.
を削除してください。
ヤフーのボタンが2行になる問題について
「Yahoo!ショッピングで見る」が2行になってしまう不具合については、画像サイズで修正できました。
もしもアフィリエイトのかんたんリンクのURLを作成する際に、
「設定」から画像の表示サイズの「大」を設定してください。
「小」にすると2行になってしまうようです。
詳しくは「手間いらず！amazonと楽天の両方のアフィリエイトリンクを一括で貼る方法！」の記事をご覧ください。
まとめ
もしもアフィリエイトのかんたんリンクをカスタマイズするCSSをご紹介しました。
すごく便利な機能なので、まだ導入を検討中の方はぜひ使ってみてください。
もしもアフィリエイトはこちらから
アサイベリーアイ」
最近パソコンやスマホを使い続けると目がしょぼしょぼしやすい…
集中してパソコンしていると目が疲れやすくなった…
というときにの原因の一つにアントシアニン不足が考えられます。
アントシアニンを手軽に補うならアサイベリーがおススメです。
アサイベリーにはアントシアニンが多い食材として有名なブルーベリーよりも4.6倍多くのアントシアニンが含まれています。
そのアサイベリーをふんだんに使ったサプリメントの「アサイベリーアイ」。
錠剤タイプのサプリメントなので、手軽にアントシアニンを摂取できます。
初回970円と他のアサイベリー系サプリよりも低価格。
しかも定期販売としては珍しく継続指定回数の制限がありません。
1回だけ試したい！など、気軽に試せるのは嬉しいです。
