どうも、ぶちくまです。
アフィリエイト商品の管理とリンク生成がとても便利なRinker。
AMPだと表示が大きく崩れたのでCocoon使用者限定にはなりますが、シンプルだけど使い勝手のいいデザインになりました。
現在、「Rinker導入しようと思ったけどあきらめたぜ！」っていう、いかにも爽やかな記事を書いています（苦笑）
結局あきらめられずに、大きなネックの一つだったAMPで表示が崩れないカスタマイズをしてみました。
ただし、Cocoon限定です。（たぶん他のテーマでも大丈夫ですが、テーマCSSの影響を受ける可能性はあります）
CocoonならAMPも楽々CSS編集できる
Cocoonだと、子テーマのAMP CSSで簡単にカスタマイズできるのです！
これからの時代、ページ速度をGoogleも評価するようになるって話ですから、検索流入はAMP、そこからいかに離脱させずにサイト内を回遊してもらうか、というのが一つ、カスタマイズのポイントになってくると思います。
Cocoonはテーマで商品リンクができるようになった
なりましたねー、どんどん進化しますねー。
記事、書くよねー。
そういうわけで、ぶちくまはRinker卒業しました。
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
問い合わせて聞いてみたところ、返答がありました。
上記以外のロゴをご利用いただくことはお断りしています、とのこと。Fontawesomeのアイコン使ってもいいか訪ねてみたが、そちらは特に明言されず。アマゾン以外のアイコンは使ってもいいかと質問してみたけど、そちらは特に返答がなかったので、各々の判断でアイコンを使うといいでしょう。
背景色は暖色系でまとめましたが、Rinker的にYahoo!は青みたいです。
個人的にはYAHOOロゴの色が赤だからそのあたりをイメージして。
あとは文字の大きさですかね。あまり大きくなりすぎずに。
価格は少しだけ色を変えました。真っ赤だと派手なので、控えめなピンクに。
画像はセンターに置くように調整しましたが、使用する画像によって多分崩れます。
AMPはだいたい崩れるのでそういうものだと思ってあきらめてください（苦笑）
とくに変更無ければプラグインからCSSコピペでもOK
RinkerはプラグインにStyle.CSSがあるので、その純正コードをコピーして、そのままAMP用のCSSスタイルシートに貼ってもそんなに大きくは崩れないようです。
コピペでOKなRinkerカスタマイズ
冥土の土産にAMPじゃない、普通の方も置いていきます。
こちらは特にCSSの制限はないので、少し回りくどい記述がおおいかもしれません。
Rinkerのモバイル時のボタン配置をまっすぐ３行に
Rinkerのデザインで唯一耐えられなかったのが、小さめのスマホで見ると、ボタンと画像がごちゃつくこと。
なので、ある程度小さい端末で画面をみたときは、ボタンが縦に１列に並ぶようになっています。
これをするために結構時間がかかってしまった。。。
/******* 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の商品リンクに全て差し替えたので、カエレバ、Rinkerなどのリンクは取り外しました。
おまけにCocoon商品リンクも比較して
ちょいといじりましたが、比較用のCocoon商品リンクも貼ってみましょうか。
ついでにWPアソシエイトポストについても
よく、Rinkerと比較されるWPアソシエイトポストですが、個人的にはRinkerよりも使いやすくて多用してました。（てへ）
WPアソシエイトポストの方が使いやすい理由
- カスタマイズしやすかった（ただし更新後はあまり違いはない）
- デザインがすっきりしていた
- UIが好みだった
と、意外にもデザイン面で惹かれたんですよね。
使い勝手の良さそうな「利率表示」は、意外と使わない。というか、まったく使わない。
まぁ、それでも、圧倒的にCocoonテーマの商品リンクの方が使い勝手が良かったので、順次張り替え作業してます。
人知れずWPAPR2にも対応していた当サイト
実は、AMPにおいても、WPAPをのせたコードを作成して、ほとんど遜色のない二つのプラグインを、意味もなく使い回していた当ブログ。
いつか比較記事でも書こうと思ってたら、不要になってた（ガクブル）
やろうと思ったことは、すぐに実行しないとダメですね。
こんな感じでつくっていました。
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%;
}
}
商品リンクについて考えてみる
2021年に追記しています。色々試しましたが、Rinkerは便利。とはいえ、慣れるとCocoon独自テーマの商品リンクが一番「対応しやすい」と思いました。
RinkerはCopia対応でより便利に
Rinkerは、有料プラグインのCopiaと連携することで、セール対応などのマイクロコピーを自動で出せるようになった（なったんだよな？）ということで、「リンクを貼るだけ」であとは勝手に売り上げも伸びる点でかなり便利です。元々便利だったのが、さらに便利になった。これはもう最強です。
羨ましいけど、作業がCocoonに慣れすぎた
では、当サイトでRinkerに統一したかと言えばそうでもない。というのも、自分でサイトを作っていると、何やかんや「Amazonの商品ページやレビュー」を確認するので、プラグインで完結した形で商品リンクを作ることもないと気づいたからです。
Cocoon商品リンクは、Amazonのページを開いている状況なら、ブログに貼り付けるコード生成はブックマークレットを使えばすぐに作業は終わるしね。
これからブログを始める、という方は、Rinker×Copiaで自動でキャンペーン情報が表示されるようになった方が、「自分が情報をキャッチしていないがための取りこぼし」を避ける意味で大きなリスクヘッジになりうると思います。
一方で、「キャンペーン情報は自分で調整する」などの信念があったり、あるいは「商品を紹介するときはECサイトでの情報収集も兼ねている」という場合には、RinkerじゃなくてCocoon利用した方がブログテーマとしては安定するな、と思った次第です。
コメント
「ウエア ウエア ペットボトル ペットボトル」に関する最新情報です。
山善が新しい水冷服「DIRECT COOL PREMIUM DC-Y1」を発売しました。このウェアは、凍らせたペットボトルで冷やした水を循環させて体を直接冷やすリュック型の水冷ウェアで、首や脇下に冷却チューブを配置し、効率的に身体を冷やすことができます。付属の900mlの専用ボトルで最大4時間30分の冷たさを保ち、650mlまでのペットボトルも使用可能です。また、従来品からの変更点として、背中のタンクキャップがスライドキャップに変更されています。
https://kaden.watch.impress.co.jp/docs/news/1585623.html
「gb amazon 10」に関する最新情報です。
Amazonが一日限定で、Android 12を搭載した高性能なタブレットを超激安価格で販売している。このタブレットは8コアCPUを搭載し、10GBのRAMと128GBのストレージを備えている。セール期間は08/06の11:40から23:40までで、Amazon割引で8,000円引きとなっている。最安価格は14,900円で、通常価格よりも大幅に安くなっている。このタブレットは画像一覧や詳細なスペック情報も提供されている。
https://prtimes.jp/main/html/rd/p/000000659.000110398.html