Amazon、Yahooショッピング、楽天市場の商品陳列に便利なRinkerのカスタマイズ

AmazonやYahooショッピング、楽天市場などの商品の陳列に便利なプラグインのRinkerをちょっとおしゃれに使いやすくカスタマイズするしていきたいとおもいます。

カスタマイズの前に、Rinkerの公式ページからプラグインをダウンロードしてください。

まずはここ!

ページ内にダウンロードの項目があるのでそこからダウンロードし、プラグイン>新規追加からダウンロードしたZipファイルをアップロードし、有効にすると使うことが出来ます。

実際のカスタマイズ後のリンクはこんな感じ

これを自分のサイトに適用するには以下のCSSを外観>カスタマイズ>追加CSSに追加してください。

div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 45%;/*幅(2列に)*/
    height:44px;
    line-height:44px;
    font-size: 1em;
    margin:10px;
    text-align:center;
  }

div.yyi-rinker-contents ul.yyi-rinker-links li a{
    height:44px;
    line-height:44px;
    font-size: 1em;
  }

div.yyi-rinker-contents div.yyi-rinker-image {
  width: 230px;
  min-width: 140px;
  padding: 0;
  }

div.yyi-rinker-contents img.yyi-rinker-main-img {
   width: auto;
  }

div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: calc(100% - 30px);
    padding-left: 0;
    margin-left:auto;
    margin-right:auto;
    display:block;
  }

@media screen and (max-width:1000px) {
    div.yyi-rinker-contents div.yyi-rinker-box{
      display:block;
    }

    div.yyi-rinker-contents div.yyi-rinker-image{
      margin-left:auto;
      margin-right:auto;
    }

    div.yyi-rinker-contents ul.yyi-rinker-links li{
      text-align:center;
      width: 100%;
      margin:10px 0;
    }
  }

実際に適用したあとに、ブラウザのウィンドウサイズを変更して動きを確認してみてくださいね。

Conoha Wing

初心者にも簡単にWordPressが導入できて、しかも早い。複数のサイトも勿論作成することができます。アクセス数に応じてプランのアップグレードダウングレードも簡単に行えます。今あるWordPressのサーバが不満でも移行ツールで簡単に移行できます。

Conoha VPS

Conoha Wingより上級者向けのプランです。サーバ全て自分で管理したい貴方におすすめ。プランのアップグレードダウングレードも可能なのでアクセスに応じたプランを気軽に変更可能。

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