【amazon】もしもアフィリエイトの『かんたんリンク』をカスタマイズ!CSSコードのまとめ!!【使い方】

2020年4月23日

もしもアフィリエイト かんたんリンク カスタマイズ

アフィリエイトのASPは何を使っていますか?

今回は人気のASP「もしもアフィリエイト」2019年3月26日にリニューアルされた「かんたんリンク」のデザインをカスタマイズしたので、まとめてみました!!

 

もしもアフィリエイトの「かんたんリンク」は「Amazon」「楽天市場」「Yahoo!ショッピング」の商品リンクをカード型のアフィリエイトリンク(レスポンシブ対応)を簡単に作成できるツールになります。

カスタマイズ自体はCSSコードをコピペして貼り付けるだけで簡単に設定できるようになっています!

 

2020年7月更新 どんな方でも使いやすいようにオススメのカスタマイズを追加しました!

\Amazonや楽天アフィリエイト/

もしもアフィリエイトに登録

初心者に最もオススメで登録簡単!

注意事項

最初に注意事項を載せておきます。

注意事項

  • CSSによるカスタマイズはサポート対象外になる。
  • カスタマイズによって違反となる事はないが、推奨されているものではない。
  • 今後の修正やアップデートで独自CSSは適用されなくなる可能性がある。
  • ワードプレスのバージョンやテーマによって内容が異なる事がある。

 

カスタマイズは自己責任になります。

もしもアフィリエイトからは推奨されてはいませんが禁止されているわけではなく、今後変わるかもしれないけど自己責任でやってね!という感じです。

カスタマイズ

下記はもしもアフィリエイト「かんたんリンク」のデフォルトのデザインです。

もしもアフィリエイト

もしもアフィリエイト

「ボタンの色がオレンジ」で「リンクの色がブラック」なのがデフォルトになります。

こちらのカードをカスタマイズしていきます!!

 

デザインは7種類にまとめました(僕が個人的に作ったものもあります)

色は自身で好きな色に変更する事はできるので是非挑戦してみてください!

カスタマイズのやり方

上記で説明したようにCSSファイルにコピペする事でカスタマイズする事ができます。

 

ファイルへのコピペは下記のどちらかで行ってください。

おすすめは追加CSSからカスタマイズするのがおすすめです!!

  1. 小テーマの「style.css」を編集しコピペする。(外観→テーマエディターからできます)
  2. 追加CSSを編集する。(外観→カスタマイズ→追加CSSからできます)

また必ずバックアップをとってから変更して下さい!

 

当ブログはテーマAFFINGER5を利用しています。

テーマによって多少レイアウトが変わったりするので気をつけてください。

 

カスタマイズのやり方 注意点

ここで注意点があります!!

サーバーで「ConoHa Wing」などのセキュリティに「WAF」の設定などがある場合は、CSSコードを追加できない事があります。

WAFとは

WAF(ウェブアプリケーションファイアウォール)はウェブ上でのアプリケーションの脆弱性に外部からの攻撃や侵入を防ぐ為のセキュリティ

この「WAF」がある事によってサーバーが攻撃されるのを未然に防いでくれています。

それと同時に「CSS」や「HTML」のコードの書き換えも出来ないようになってしまっています。

 

ですので、上記を書き換える時は一時的に設定をオフにする必要があります。

書き換えた後には設定をオンにしておく事をおすすめします!!

カスタマイズデザイン一覧

なるべく誰でも使えるように幅広くカスタマイズを紹介していきます!!

ボタンカラーなどは自分の好きなカラーに変更できるようになっていますので、個性を付けたい方は是非試してみてください!!

2020年7月 新しいデザインを追加しました。

当ブログのおすすめするデザイン

もしもアフィリエイト カスタマイズ

もしもアフィリエイト カスタマイズ

マウスカーソルを合わせた状態

こちらは僕がカスタマイズしたデザインです。

 

初期のデフォルトデザインを見ていただくと分かりますが「Yahooショッピング」の項目のレイアウトが崩れて二段になってしまう事があります。

ですので、縦に3種類表示させるように設定させて崩れないようにしました。

 

ボタンは当ブログに合わせて少し薄い色に設定していて、マウスカーソルを合わせると色が反転するように設定しています。

 

 

当ブログの最もオススメするデザイン

こちらは定番カラーで誰でも使いやすいように変更したモデルです!!

多くの反響を頂きこちらのカスタマイズを公開しました。

 

是非活用してみて下さい!

勿論ボタンカラーもマウスで暗転もするように設定しています。

 

 

どんなサイトでも合うデザイン

もしもアフィリエイト カスタマイズ

もしもアフィリエイト カスタマイズ

マウスカーソルを合わせた状態

もしもアフィリエイト カスタマイズ

どんなブログでも合うカラーのデザインです。

ボタンの色が別々になっていてマウスポインターで色が反転します。

 

おすすめのカスタマイズと違うところはボタンがコンパクトになっています。

テーマによってはレイアウトが崩れる事があります。

 

 

シンプルなデザイン

もしもアフィリエイト カスタマイズ

もしもアフィリエイト カスタマイズ

マウスカーソルを合わせた状態

もしもアフィリエイト カスタマイズ

とてもシンプルです。

上記の反転バージョンです。

 

 

控えめデザイン

もしもアフィリエイト カスタマイズ

もしもアフィリエイト カスタマイズ

控えめな配色で縦並びです!

当ブログはこちらの配色を参考にしています。反転はしません。

 

 

目立つデザイン

もしもアフィリエイト カスタマイズ

もしもアフィリエイト カスタマイズ

縦並びでボタン端を丸くしてあります。

赤で強調していて目立つようにしています。

 

 

クラシカルなデザイン

もしもアフィリエイト カスタマイズ

もしもアフィリエイト カスタマイズ

余計な配色をしないシンプルでクラシカルなデザインです。

ボタンの調整はしっかりされています!!

 

 

ボタンのカラーについて

上記カスタマイズデザインは全てボタンのカラーを変更する事ができます。

 

変更の仕方は上記コードの文字色や背景色などの欄にある「 #英数字」の部分を変更するだけです。

下記リンクを参考にしてお好みの色のコードをコピペしてみて下さい!

配色の参考

参考
🎨配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
🎨配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色

続きを見る

まとめ

いかがでしたでしょうか?

CSSをカスタマイズする際は事前にバックアップを取っておくことを忘れずにして下さい。

 

多くの方がカスタマイズをして公開していますが、今回は自分の納得いくようにカスタマイズしたものと一緒にご紹介しました!

自身で色だけでも変更すればかなりオリジナリティが出るので是非挑戦してみてはどうでしょうか?

ここまで読んでいただきありがとうございました。

\Amazonや楽天アフィリエイト/

もしもアフィリエイトに登録

初心者に最もオススメで登録簡単!

スポンサーリンク
スポンサーリンク

こちらの記事もよく読まれています!

-アフィリエイト
-, , ,