広告

AFFINGER6|もしもアフィリエイトのかんたんリンクをCSSでカスマイズする

AFFINGER6|もしもアフィリエイトのかんたんリンクをCSSでカスマイズする

もしもアフィリエイトには、初心者向けの様々なツールがあります。

2019年3月26日には新たなツールとしてリニューアルされた「かんたんリンク」が登場し物販と呼ばれる「Amazon」「楽天市場」「Yahooショッピング」をまとめて掲載できるツールが登場しました。

リンク集は各販売サイトをまとめて紹介できるので、どこかで購入してもらえれば簡単に成約するのが特徴です。

-AFFINGERで始めるもしもアフィリエイト-

もしもに登録する

こんな方におすすめ

  • かんたんリンクをよりオシャレにしたい
  • 自分のサイトに合うようにカスタマイズしたい
  • 他サイトとは違う個性を出したい

今回はもしもアフィリエイトのかんたんツールをCSSでカスタマイズしたので、まとめて紹介していきたいと思います。

もしもアフィリエイトかんたんツール

もしもアフィリエイトのかんたんツールはよく見る商品リンクをまとめたツールです。

実際のかんたんツールはこんな感じです

このツールは日々アップデートされていいて、登場時は中々味気ない感じの見た目をしていましたが、現在ではもしもアフィリエイト上でツール作成時にある程度デザインを変更することができます。

ボタンの量を増やししたり、カラーを変更したり、文言を変えることもできるようになっています。

ですが、この機能はリンクを作成するたびに設定しなければならないので少し手間な部分もあります。

CSSで一度変更してしませば、何もせずともリンクを作って貼るだけでスタイルが適用されるのとても便利です!

おすすめ記事AFFINGERでアフィリエイトを始める初心者は「もしもアフィリエイト」がおすすめ!

-AFFINGERで始めるもしもアフィリエイト-

もしもに登録する

CSSカスタマイズ

もしもアフィリエイトのかんたんリンクはCSSでカスタマイズすることができます。

CSSの記入はいずれかの方法でできます。

  • 小テーマの「style.css」を編集する
    • 外観>テーマエディター
  • 追加CSSを編集する
    • 外観>カスタマイズ>追加CSS

テーマによって多少レイアウトが変わったりするので気をつけましょう。

スタイルシートについて

注意事項

かんたんリンクをCSSでカスタマイズする際は注意事項があります。

注意事項

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

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

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

基本的にCSSのカスタマイズは自己責任なのでバックアップは必ずとりましょう!

カスタマイズ出来ない時は?

サーバーで「WAF」の設定がオンになっている場合があります。

この場合は一時的に設定をオフにしなければサイトをカスタマイズできません。

WAFとは?

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

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

ですが「Xサーバー」や「ConoHa Wing」などサーバー側で設定がオンになっている場合は「CSS」や「HTML」のコードの書き換えも出来ないようになってしまっています。

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

-AFFINGERで始めるもしもアフィリエイト-

もしもに登録する

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

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

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

おすすめデザイン

定番カラーでどんなサイトにも合うデザインです。

ボタンには影を追加しており、商品名をリンクだと分かりやすいようにカラーの変更をしています。また、ボタンを縦配列で幅いっぱいに表示するようにしています。

マウスホバー時

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

選択しているボタンのアウトライン表示います。

アウトラインのデザイン

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

アウトラインのデザインです。

こちらもボタンを縦に配置していますが、画像の大きさによっては以下のようにヤフーショッピングが二段に表示されることがあります。

もしもアフィリエイト カスタマイズ
マウスホバー時

マウスホバーで暗転されるように設定しています。

控えめデザイン

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

控えめな配色で縦並びのデザインを採用し、クリックで反転しないようにしています。

また、周囲のラインも二重線からグレーの線に変更しました。

カラーのみ変更も簡単なので好みのカラーに変更してみましょう。

角丸のデザイン

縦並びでボタン端を丸くしたデザインです。

ボックスデザイン自体をグレーにして影をつけたデザインになっています。

もちろんカラーを変更すれば好みのものに変更することもできます。

クラシックなデザイン

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

昔ながらの見た目で優しい感じのリンク集になっています。

画像は大で使用しています。

ボタンサイズ調整をしっかりしていて、無駄なく配列できます。

ボタンのカラーについて

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

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

WEB色見本 原色大辞典 - HTMLカラーコード
WEB色見本 原色大辞典 - HTMLカラーコード

www.colordic.org

また、新しいかんたんリンクはリンクを作成するごとにカラーを変更できるようになっています。

-AFFINGERで始めるもしもアフィリエイト-

もしもに登録する

商品管理プラグイン

WordPressでは商品管理プラグインが登場しています。

それぞれ使いこなせるとかんたんリンクよりもさらに使いやすいので、ぜひチャレンジしてみてください。

もしもアフィリエイトは初心者におすすめのASPです。

もしもアフィリエイトはおすすめ

かんたんリンクを利用する際はコピペだけで簡単ですが、デザインを確認しながら設定してみてください。

-カスタマイズ
-

PAGE TOP