皆様ご機嫌よう、ごいちです。
ブログアフィリエイターご用達の商品管理用プラグイン「Rinker」、当ブログでも導入を始めました。
Amazon、楽天、Yahooショッピングがセットになったアフィリエイトリンクを検索から生成まで簡単にできるため非常に便利なプラグインです。しかし、リンクボタンに ul li a のCSSを利用している関係上、使用するWordpressテーマによってはリストやリンクに設定されているアイコンや背景のデザインを取り込んでしまい、表示が大きく崩れてしまいます。
こちらの記事では、「The Thorなどテーマで設定しているアイコンは残しつつ、Rinkerは据え置きのデザインでいきたい」方向けに、Rinker上でも設定されてしまうリンクアイコンや背景色の削除方法について紹介していきます。
The Thorで発生したRinkerのデザイン崩れ(例)
実際に自分のブログで発生したデザイン崩れです。
こちらのブログでは、
- リストのbefore属性で箇条書きリストの文字の前にチェック型のアイコンを設定
- The Thor(テーマ)のテーマカスタマイザーで背景色と右下にページめくり風のデザインを設定
上記のような形でリストのデザイン設定をしているのですが、Rinkerのボタンリンクにも見事にそれが反映されてしまっています。
Rinkerでもボタンを並べるのにlist属性を使用しているんですね。The Thor以外でも、リストのカラーや背景を設定している方は多くいらっしゃるかと思いますので、デザインが崩れてしまった方は一定数いるかと思います。
リンクの仕上がりは直接の収益にも関係しますしスッキリまとめたいところですよね・・・。
Rinkerのデザイン崩れを解消する方法(CSS追記で対応)
これを解消するには、CSSでRinkerのみ該当のデザインの設定を解除すればOKです。
こちらの方法ではCSSに追記を行うため、デザインを崩すのが心配な方は必ずバックアップをとってから作業を行うようにしてください。
コードは以下のように記述しました。
- before属性は、アイコンなどをリストの前に設定している場合に指定
- after属性は、ページめくりをリストの前に設定している場合に指定
- 部分は上記画像のように背景が設定されてしまう場合に指定
要は、すべて設定されているCSSをnoneで解除している形ですね。
その仕様上、一瞬デザインが読み込まれる形になります。ちょっと違和感ありますが、元のデザインのまま表示するよりはよいでしょう。
リストのデザイン設定削除完了後のRinkerバナー
リストに設定されていたアイコンと背景を削除してスッキリしましたね。
まだ行間や文字間隔など修正すべき点がいくつかありますがそれはまた別途行いたいと思います。
当ブログではこれまではAmazonアソシエイト一本でしたが、Rinkerの導入にあわせて「もしもアフィリエイト」「バリューコマース」の申し込みを行いました。いよいよ本格的にアフィリエイトブログっぽくなってきましたね。
当サイトのRinkerのリンク構成
- Amazon・・・Amazonアソシエイト(直接)
- 楽天・・・もしもアフィリエイト
- Yahooショッピング・・・バリューコマース
上記の形式で配置しました。
料率や支払いの簡単さを考慮すると上記がベストかと思いましたがいかがでしょうか？
Amazonはもしもとアソシエイトで料率は変わらないようですが、直接の販売がないとエラーが発生する等の情報があったため、この形式にまとまりました。
まだ調べている最中なので構成は今後変わっていくかもしれません。詳しい皆様の情報をお待ちしております。
まとめ
- Rinkerがテーマで設定されているリストのデザインを読み込んでしまう場合は、CSSに追記で対処可能
- Amazon、楽天、yahooショッピングのリンクをまとめて生成できるRinkerは超便利
Amazonアソシエイトのデフォルトで生成されるバナーはそのまま貼るとampエラーが発生したりデザインがイマイチだったりしますが、Rinkerはシンプルで汎用性のあるバナーが生成できるため非常に有用ですね。
しかも、検索から商品リンクの追加まで簡単にできてしまうので、アフィリエイトを行うブロガーにとっては必須級のプラグインだと思います。今回私の環境ですとデザインが崩れましたがこの記事の方法で簡単に対処できましたので、導入当初にデザイン崩れがあってもめげずに導入することを強くオススメします！