カエレバのリンクで楽天ではなくAmazonを一番最初にする方法

今回はちょっと細かいネタなのですが、カエレバでリンクを作成したときに「楽天市場」が最初に表示されてしまうのが、微妙だなあと感じたので、これを解決する方法を書いていきたいと思います。

カエレバのリンクは楽天市場が最初
rinkerはAmazonが最初
Amazonのリンクを一番最初に表示させたい
まとめ

カエレバのリンクは楽天市場が最初

カエレバでリンクをつくってみるとわかるのですが、カエレバの仕様なのかなんなのかわかりませんが、楽天市場のリンクが最初に表示されてしまいます。

このように楽天、アマゾン、ヤフーの三社でカエレバリンクを作った場合、楽天市場が最初に表示されてしまうのです。

rinkerはAmazonが最初

amazonの商品リンクを作るとにきに便利なwordpressプラグインに「rinker」というものがあります。これを使って商品リンクをつくっているサイトはたまにみかけます。

rinkerの場合はamazonが最初に表示されています。

※rinkerはAPI依存のため現在は使える人が限られます。

Amazonのリンクを一番最初に表示させたい

楽天市場が最初ってのは、なんか違和感があるのでrinkerみたいにAmazonの商品リンクを先に表示させたいですよね。

と、おもっていろいろサイトをみていたんですが、Amazonのリンクが一番最初にきているカエレバユーザーの方も結構いるみたいです。（自分でカスタマイズしたのでしょう）

前置きがながくなりましたが、cssでリンクの並び順を変えることができます。

display: flex; と orderをつかえば簡単に順番を変えることができます。

.kaerebalink-link1
{
overflow: hidden;
display: flex;
flex-flow: row wrap;
}
.shoplinkamazon{
	order: 1;
}
.shoplinkrakuten{
	order: 2;
}
.shoplinkyahoo{
	order: 3;
}

flex-flow: row wrap;は段落ちさせるために記述しています。display: flex;は指定したボックスがフレキシブルになりますから、ウインドウの幅をせばめても子要素が段落ちしなくなります。ですから、flex-flow: row wrap;をつかって段落ちさせたほうが見栄えがよくなります。

orderに関しては文字通り順番を指定しています。orderはflexボックスの子要素に指定します。親がflexでない場合、orderを指定しても順番は変更されません。