ワードプレス

【コピペでOK】もしもアフィリエイトの簡単リンクをcssでカスタマイズ!

もしもアフィリエイト かんたんリンク

もしもアフィリエイトのかんたんリンク機能を使うと、
アマゾン、楽天、ヤフーショッピングのアフィリエイトリンクを簡単に一括作成することができます。

しかし、見栄えがイマイチだったので、cssでカスタマイズしました。

CSSカスタマイズ後の「かんたんリンク」は以下のようになります。

cssをご紹介しますので、もし気に入ったらご利用ください。

ねこさん
ねこさん
もしもアフィリエイトって何?

という方は以下の記事もご覧ください。

もしもアフィリエイト
【もしもアフィリエイト】使って感じたメリット・デメリットまとめ!私が使って感じた、もしもアフィリエイトのメリットやデメリットをご紹介しています。 ...
スポンサーリンク
※ 当サイトではアフィリエイト広告を利用しています

もしもアフィリエイトの「かんたんリンク」をcssでカスタマイズ

もしもアフィリエイトのかんたんリンクの残念なところ

もしもアフィリエイトが提供しているかんたんリンクは、
手軽にアマゾンや楽天のアフィリエイトリンクを貼れる素晴らしい機能です。

カスタマイズをしなくても以下のようなアフィリエイトリンクを数クリックで作成できます。
もしもアフィリエイト かんたんリンク

かんたんリンクの詳細は「手間いらず!amazonと楽天の両方のアフィリエイトリンクを一括で貼る方法!」も合わせてご覧ください。

手間いらず!amazonと楽天の両方のアフィリエイトリンクを一括で貼る方法!もしもアフィリエイトの「かんたんリンク」というツールをご紹介。amazonと楽天の両方のアフィリエイトリンクを手間暇をかけずに一括で貼ることができます。...


もしもアフィリエイトはこちらから

しかし残念な点が一つだけ。

ねこさん
ねこさん
見栄えがとても悪いんです…

他社への忖度があったのかもしれませんが、何故このデザインを採用したのか不思議なくらいです。

私が思う残念な点

リンクカードが全体的に大きい
商品名が目立たない
ボタンの色がオレンジ一色
「Yahoo!ショッピングで見る」が2行になる
スマホ表示の時が縦長すぎる

「Yahoo!ショッピングで見る」が2行になるについては、こんな感じです。
もしもアフィリエイト かんたんリンク

ねこさん
ねこさん
残念すぎます…

スマホ表示の時が縦長すぎるについてはこんな感じです。
もしもアフィリエイト かんたんリンク

スマホ画面全体がリンクカードで占拠されます。

ねこさん
ねこさん
ユーザーファーストとは反対方向を猛進してますよね…。

これらは全てビジュアルで解決できる内容です。
そこでこれらの点を改善すべくCSSでカスタマイズしてみました。

■■カスタマイズしたCSS■■

CSSカスタマイズ後の「かんたんリンク」は以下のようになります。
もしもアフィリエイト かんたんリンク

スポンサーリンク
ねこさん
ねこさん
少しは見やすくなったかと思います

スマホ版はこんな感じです。

上でご紹介したリンクカードに変更したい場合は、
以下のCSSを「style.css」にコピペするだけで使えるようになります。

また、一度style.cssにコピペした後は、
従来通りにかんたんリンクをブログに貼り付ければカスタマイズした内容が反映されます。

反映前にバックアップを取ってください
子テーマにコピペしてください
使用しているテーマによっては反映されないかもしれません
設定は自己責任でお願いします

See the Pen
zYvKqyq
by イチ (@ichinomemo)
on CodePen.

オリジナルとの変更点

主な変更点は以下の通りです。

タイトル

文字色を変更
太字

ボタン

色を変更
横長に変更
縦3行配置
外枠に影を追加
マウスオーバー時に色を変更

その他

メーカー名を非表示
型番を非表示
外枠に影を追加
スマホ時の画像サイズ変更
リンクカード全体を縮小

CSSをさらにカスタマイズしたい場合は

全体の大きさ

全体の縮尺を変えたい場合は、
/* 全体 */というところにある、
transform: scale(0.8, 0.8); /* 全体を小さく表示 */
のscaleの数字を調整してください。
(現在は0.8)

文字色の変更

色を変更したい場合は、
修正したい行に記載の#(6ケタの英数字)を好みの色コードに変更してください。

ねこさん
ねこさん
Googleで「赤 色コード」などと検索するとでてきますよ

メーカーと型番について

カードのサイズ(特にスマホ版)を小さくするために、メーカーと型番を非表示にしています。

表示させたい場合は、

See the Pen
abvmNYN
by イチ (@ichinomemo)
on CodePen.


を削除してください。

ヤフーのボタンが2行になる問題について

「Yahoo!ショッピングで見る」が2行になってしまう不具合については、画像サイズで修正できました。

もしもアフィリエイトのかんたんリンクのURLを作成する際に、
「設定」から画像の表示サイズの「大」を設定してください。
もしもアフィリエイト かんたんリンク

「小」にすると2行になってしまうようです。

詳しくは「手間いらず!amazonと楽天の両方のアフィリエイトリンクを一括で貼る方法!」の記事をご覧ください。

まとめ

もしもアフィリエイトのかんたんリンクをカスタマイズするCSSをご紹介しました。
すごく便利な機能なので、まだ導入を検討中の方はぜひ使ってみてください。


もしもアフィリエイトはこちらから
スポンサーリンク
目が疲れやすいと感じたら「アサイベリーアイ


最近パソコンやスマホを使い続けると目がしょぼしょぼしやすい…
集中してパソコンしていると目が疲れやすくなった…
というときにの原因の一つにアントシアニン不足が考えられます。

アントシアニンを手軽に補うならアサイベリーがおススメです。
アサイベリーにはアントシアニンが多い食材として有名なブルーベリーよりも4.6倍多くのアントシアニンが含まれています。

そのアサイベリーをふんだんに使ったサプリメントの「アサイベリーアイ」。
錠剤タイプのサプリメントなので、手軽にアントシアニンを摂取できます。

初回970円と他のアサイベリー系サプリよりも低価格。
しかも定期販売としては珍しく継続指定回数の制限がありません。
1回だけ試したい!など、気軽に試せるのは嬉しいです。