Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

RinkerをAMPでも崩れない程度にカスタマイズに成功【Cocoon限定】

どうも、ぶちくまです。

アフィリエイト商品の管理とリンク生成がとても便利なRinker。
AMPだと表示が大きく崩れたのでCocoon使用者限定にはなりますが、シンプルだけど使い勝手のいいデザインになりました。

現在、「Rinker導入しようと思ったけどあきらめたぜ!」っていう、いかにも爽やかな記事を書いています(苦笑)

結局あきらめられずに、大きなネックの一つだったAMPで表示が崩れないカスタマイズをしてみました。

ただし、Cocoon限定です。(たぶん他のテーマでも大丈夫ですが、テーマCSSの影響を受ける可能性はあります)

スポンサーリンク

CocoonならAMPも楽々CSS編集できる

Cocoonだと、子テーマのAMP CSSで簡単にカスタマイズできるのです!

これからの時代、ページ速度をGoogleも評価するようになるって話ですから、検索流入はAMP、そこからいかに離脱させずにサイト内を回遊してもらうか、というのが一つ、カスタマイズのポイントになってくると思います。

Cocoonはテーマで商品リンクができるようになった

なりましたねー、どんどん進化しますねー。

Amazonと楽天商品リンクモバイル表示をカスタマイズ|Cocoon
Cocoonの商品リンクが素敵にアップデートされたので、モバイル版の形式だけ少しカスタマイズしてみました。Yahooのリンクだけ少し大きいなと感じたので、それぞれ同じ大きさにして、あまりみない丸いボタン風にしてみました。簡単なコードにしたので、さらにカスタマイズを深めてください。

記事、書くよねー。

そういうわけで、ぶちくまはRinker卒業しました。

コメントに気づかず申し訳なかった。。。

SNS慣れしておらず、コメントがきていることに気づかず、せっかくのレスポンスに対応できずにすいませんでした。

今、Rinkerみてみたら、

  • 箇条書きリストの黒ぽちが消されていない
  • Amazonボタンと楽天ボタンの間に空白がある

などなど(もっとあると思いますが)不具合もみられていました。空白についてはコメントでいただいたのですが、当方では再現されておらず。

しかも、Rinkerが更新されるごとに、余計な余白がつくられたり。

プラグインは更新のタイミングでCSSやり直さないといけないのでしんどいですね。

スポンサーリンク

コピペで楽々AMP用CSSコードを公開

一応、解説もしますから、色などの変更はご自由に行ってください。

ぶちくま
ぶちくま

表示乱れてたらコメントください!


/******* AMP用rinker カスタマイズ*******/

/**ショップリンク**/
.yyi-rinker-links li {
    box-shadow: 2px 3px 8px -5px rgba(0,0,0,.25);
}
.yyi-rinker-contents .yyi-rinker-links a{
    display: block;
    margin: 0 auto 8px;
    text-decoration: none;
    font-size: .9em;
    text-align: center;
    color: white; 
    padding: 0.2em 2em;
    border-radius: 4px;
    }
.yyi-rinker-links .amazonlink a{
 background: #f6a306;
}
.yyi-rinker-links .amazonlink a:before {
    font-family: "fontawesome";
    content: "\f118";
    margin-right: .5em;
   }
.yyi-rinker-links .rakutenlink a{
    background: #cf4944;
    }
.yyi-rinker-links .rakutenlink a:before {
        font-family: "fontawesome";
        content: "\f25d";
    margin-right: .5em;
}
.yyi-rinker-links .yahoolink a{
    background: #e86e6e;
}
.yyi-rinker-links .yahoolink a:before {
       font-family: "fontawesome"; 
       content: "\f07a";
    margin-right: .5em;
}
/**テキスト調整**/
.yyi-rinker-info .yyi-rinker-title p {
    font-size: .8em;
}
.yyi-rinker-info .yyi-rinker-detail .price {
    color: #f7a9a9;
}
/**外観調整**/
.yyi-rinker-contents {
border: double 3px #dbdbdb;
    box-shadow: 2px 3px 8px -5px rgba(0,0,0,.25);
}
.yyi-rinker-title {
    margin: 0 2em;
}
.yyi-rinker-detail {
    margin: 0 2em;
}
.price-box {
    font-size: 0.8em;
}
div.brand {
    font-size: 0.8em;
}
/**画像調整**/
.yyi-rinker-contents .yyi-rinker-image {
    width: 160px;
    min-width: 160px;
    margin: 1em auto;
}
/**黒ぽちlistを消す**/
ul.yyi-rinker-links {
    list-style-type: none;
}

はい、こんな感じです。

他のコードが作用しているようだったら、優先度を上げるか、一度打ち消してからコード記入するといいかも。

RinkerはAMP非対応なのでYahooのリンクにバリューコマースのLinkSwitchコードタグがのっかっていません。

つまり、バリューコマースがリンクを認知できない。Yahooショッピングを楽しむためだけのリンクになります。

今回のカスタマイズはあくまでもStyle.CSSの調整なので、Yahooショッピング時のアフィリエイトリンクをつくるためのものではないことをご了承ください。

もしもアフィリエイトの場合はID認識はAMPでもしてくれるので、少し利率が下がりますが、それでもよければもしも優先にすれば回避はできる。

もともとYahooはバリューコマース独占なので利率の差が出るのは仕方がない。

Yahoo!ショップは、ストア側に対して店舗経営しやすく配慮するなど優遇していることもあって、楽天ばりにショップ収益があるようになってきています。

ぜひ、早期対応を望みたい。

カスタマイズのポイント

AMPに関しては、一応、モバイル専用なのであまりレスポンシブのことは考えずに構築しました。

AMPは実は書き込める文字数に制限がありまして、誠に個人的な事情により、あまり凝ったデザインにはできない実情がありまして。

かなりシンプルな感じになってます。

ホバー時のエフェクトとか入れたいなぁとは思ってるんだけどねぇ。

まぁ、ほら、人生引き算もうまく使わないと、みたいなところあるじゃないですか。

そういうことで(どういうことだ)

背景色の変更やアイコンを使って少しだけ個性的なデザインにする

一応、各ショップのリンク前に、アイコンを入れられるように、それらしいものは配置してみました。

本当はAmazonのアイコン、使いたいんだけど、アソシエイト的にはNGらしいですね、残念。

Amazon アソシエイトはロゴを勝手に使うとNG

問い合わせて聞いてみたところ、返答がありました。

https://affiliate.amazon.co.jp/tips/t3/a3/
上記以外のロゴをご利用いただくことはお断りしています、とのこと。Fontawesomeのアイコン使ってもいいか訪ねてみたが、そちらは特に明言されず。アマゾン以外のアイコンは使ってもいいかと質問してみたけど、そちらは特に返答がなかったので、各々の判断でアイコンを使うといいでしょう。

背景色は暖色系でまとめましたが、Rinker的にYahoo!は青みたいです。

個人的にはYAHOOロゴの色が赤だからそのあたりをイメージして。

あとは文字の大きさですかね。あまり大きくなりすぎずに。

価格は少しだけ色を変えました。真っ赤だと派手なので、控えめなピンクに。

画像はセンターに置くように調整しましたが、使用する画像によって多分崩れます。

AMPはだいたい崩れるのでそういうものだと思ってあきらめてください(苦笑)

とくに変更無ければプラグインからCSSコピペでもOK

RinkerはプラグインにStyle.CSSがあるので、その純正コードをコピーして、そのままAMP用のCSSスタイルシートに貼ってもそんなに大きくは崩れないようです。

スポンサーリンク

コピペでOKなRinkerカスタマイズ

冥土の土産にAMPじゃない、普通の方も置いていきます。

こちらは特にCSSの制限はないので、少し回りくどい記述がおおいかもしれません。

Rinkerのモバイル時のボタン配置をまっすぐ3行に

Rinkerのデザインで唯一耐えられなかったのが、小さめのスマホで見ると、ボタンと画像がごちゃつくこと。

なので、ある程度小さい端末で画面をみたときは、ボタンが縦に1列に並ぶようになっています。

これをするために結構時間がかかってしまった。。。


/******* Style.cssに貼ってねrinkerカスタマイズ *******/
/******* rinker *******/
@media screen and (max-width:522px) {
#content .yyi-rinker-box {
    display: inline-block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 0 auto;
}
#content div.yyi-rinker-contents ul.yyi-rinker-links {
width: 90%;
    display: block;
    text-align: center;
}
}
@media (max-width: 420px) and (min-width: 321px)
div.yyi-rinker-contents div.yyi-rinker-info {
    width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
    width: 100%;
}

 

スポンサーリンク

カエレバとの比較用〜圧倒的にリンク生成はRinkerが優秀

なれればカエレバ のリンク生成も大変ではない。

ただ、取得の際に検索用語つくったりとかは少し面倒。

だけど、AMPデザインもCocoonなら準備されているし、Yahooリンクが収益にならないのは少しもったいない。

おまけにCocoon商品リンクも比較して

ちょいといじりましたが、比較用のCocoon商品リンクも貼ってみましょうか。

スポンサーリンク

ついでにWPアソシエイトポストについても

よく、Rinkerと比較されるWPアソシエイトポストですが、個人的にはRinkerよりも使いやすくて多用してました。(てへ)

WPアソシエイトポストの方が使いやすい理由

  • カスタマイズしやすかった(ただし更新後はあまり違いはない)
  • デザインがすっきりしていた
  • UIが好みだった

と、意外にもデザイン面で惹かれたんですよね。

使い勝手の良さそうな「利率表示」は、意外と使わない。というか、まったく使わない。

まぁ、それでも、圧倒的にCocoonテーマの商品リンクの方が使い勝手が良かったので、順次張り替え作業してます。

人知れずWPAPR2にも対応していた当サイト

実は、AMPにおいても、WPAPをのせたコードを作成して、ほとんど遜色のない二つのプラグインを、意味もなく使い回していた当ブログ。

ぶちくま
ぶちくま

いつか比較記事でも書こうと思ってたら、不要になってた(ガクブル)

やろうと思ったことは、すぐに実行しないとダメですね。

アサヒ飲料 十六茶 お茶 ペットボトル 2L×10本

アサヒ飲料 十六茶 お茶 ペットボトル 2L×10本

2,560円(04/18 20:59時点)
Amazonの情報を掲載しています

 

こんな感じでつくっていました。

AMP用のCSSコード紹介(コピペ自由)

自由にカスタムっちゃってください。


/**ショップリンク**/
a.wpap-link-amazon,a.wpap-link-rakuten,a.wpap-link-yahoo{
    display: block;
    margin: 0 auto 8px;
    text-decoration: none;
    font-size: .9em;
    text-align: center;
    color: white; 
    padding: 0.2em 2em;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
}
a.wpap-link-amazon,a.wpap-link-rakuten,a.wpap-link-yahoo{
	margin: 1em 2em;
}
/**各ECサイト調整、背景色とアイコン挿入**/
a.wpap-link-amazon{
 background: #f6a306;
}
a.wpap-link-amazon:before{
    font-family: "fontawesome";
    content: "\f118";
    margin-right: .5em;
   }
a.wpap-link-rakuten{
    background: #cf4944;
    }
a.wpap-link-rakuten:before{
        font-family: "fontawesome";
        content: "\f25d";
    margin-right: .5em;
}
a.wpap-link-yahoo{
    background: #e86e6e;
}
a.wpap-link-yahoo:before{
       font-family: "fontawesome"; 
       content: "\f07a";
    margin-right: .5em;
}
/**テキスト調整**/
p.wpap-title{
    font-size: .8em;
}
.wpap-price{
    color: #f7a9a9;
}
.wpap-price{
	font-size: 0.8em;
}
span.wpap-date {
    color: gray;
}
.wpap-note {
    font-size: 0.8em;
    color: gray;
}
/**外観調整**/
.wpap-tpl{
border: double 3px #dbdbdb;/**周囲を囲むカスタマイズ**/
}
.wpap-price,.wpap-note,p.wpap-title{
    margin: 0 2em;
}
.price-box,div.brand {
    font-size: 0.8em;
}
.wpap-note{
	text-align: right;
}
/**画像調整**/
.wpap-image{
    width: 160px;
    min-width: 160px;
    margin: 1em auto;
}

こんな感じです。

通常ページ用CSSコード

 


/**WPAPカスタマイズ**/
/**リンクボタン調整**/
#content .wpap-tpl-with-detail .wpap-link a {
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
    font-weight: bold;
    font-size: 1.2em;
}
/**ショップリンク色変更**/
#content a.wpap-link-amazon{
background: #f6a306;
}
#content a.wpap-link-rakuten{
    background: #cf4944;
}
#content a.wpap-link-yahoo{
    background: #e86e6e;
}
#content .wpap-tpl-with-detail .wpap-title {
    font-size: .9em;
}
#content .wpap-tpl-with-detail .wpap-price {
    color: #f7a9a9;
    font-size: .9em;
}
@media screen and (max-width:522px){
#content .wpap-tpl-with-detail .wpap-link a{
			font-size: .7em;
	}
#content .wpap-tpl-with-detail .wpap-link a span {
    margin: 0 0.5em;
}
}
/**スマホ縦一列**/
@media screen and (max-width:522px){
#content .wpap-tpl-with-detail .wpap-title {
    font-size: 14px;
    margin: 10px 0 5px;
    display: flex;
    display: block;
}
#content .wpap-tpl-with-detail .wpap-link a {
    margin: 0 auto;
    width: 90%;
    display: block;
    text-align: center;
    margin: 0.5em 1em;
}
#content .wpap-tpl-with-detail .wpap-link a span {
    margin: 0 0.5em;
}
}
@media screen and (min-width:523px){
	#content .wpap-tpl-with-detail .wpap-link a {
    width: 50%;
}
}

 

コメント

タイトルとURLをコピーしました