iPad miniとApple Pencilの使い勝手
カスタマイズ

Rinkerカスタマイズ for wordpressテーマ JIN 2

前回に引き続きBear face（@Bearface18）さんのRinkerカスタマイズ記事を元に丸ｐ・・・参考に今回もRinkerのカスタマイズをお送りしていきます。

おおむね自分用のメモです。


※ wordpressテーマJINの2.0からfontawesome5を外せるようになっていますが、このカスタマイズを使用する場合は「fontawesomeを読み込まない」にチェックは入れないでください。

細やかな仕上がりに関してはBear faceさんの記事を確認してください。

SANGO＋PORIPU使いの方はBear faceさんのサイト(for-men)へジャンプ！

for-menはSANGO＋PORIPUユーザーなら知っておいて損はないおしゃれなデザインおよびカスタマイズがあるブログです。

SANGO用元記事

  • 【SANGOを自分でカスタマイズ】Rinkerのデザインを変えてみる２ | for-men

今回のカスタマイズは二つあります。なんという太っ腹。(自分だったらひとつひとつ別記事にしてグルグル巡回してもらうところですね！)

カスタマイズに関しては自己責任で行ってください。カスタマイズはテーマの追加CSSで行うか、JINの【子テーマ】をダウンロードして子テーマのstyle.cssで行うとより安全にカスタマイズを行う事ができます。

Rinkerカスタマイズ２のパターン１

PANASONIC（パナソニック）2018年モデル ギュット・アニーズ・F・DX　カラー：マットディープグリーン　BE-ELA63-G 26インチ 専用充電器付
パナソニック(Panasonic)

横並びの四角いボタンになり、ボタンの表示がアイコンになります。

すっきりしたデザインが良い人はこちらを選ぶといいでしょう。

/*--------------------------------------
  Rinker パターン１
--------------------------------------*/
div.yyi-rinker-contents {
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
    margin: 1em 0;
    position: relative;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: .7em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin-left: 3%;
    width: 30%;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0 3%;
    width: 100%!important;
}
div.yyi-rinker-title {
    font-size: .9em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0 0 5px 0;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #0066c0;
    font-weight: 500;
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
    color: #c45500;
}
div.yyi-rinker-detail div.credit {
    font-size: 10px;
    color: #626262;
    opacity: .7;
    font-family: 'Avenir',sans-serif;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
    font-size: 12px;
    color: #556FB5;
    font-family: 'Avenir',sans-serif;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: rgba(0,0,0,.38);
    padding-left: 0;
    margin-top: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
    text-align: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    position: relative;
    width: 65px;
    height: 60px;
    padding: 0;
    margin: .5em 4% .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    font-weight: 500;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    height: 60px;
    line-height: 60px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 3px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: transparent;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before {
    content: "\f270";
    width: 0%;
    color: #3A4D66;
    font-family: "Font Awesome 5 Brands";
    left: 18px;
    font-size: 30px;
    line-height: 60px;
    font-weight:400;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #D95656;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
    color: transparent;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before {
    content: "\f25d";
    width: 0%;
    color: #fff;
    font-family: "Font Awesome 5 Free";
    left: 18px;
    font-size: 30px;
    line-height: 60px;
    font-weight:900;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #FF4D4D;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{
    color: transparent;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink:before {
    content: "\f19e";
    width: 0%;
    color: #fff;
    font-family: "Font Awesome 5 Brands";
    left: 18px;
    font-size: 30px;
    line-height: 60px;
    font-weight:400;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;
}
@media (max-width: 1200px) and (min-width: 100px){
div.yyi-rinker-contents ul.yyi-rinker-links {
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-around;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
}
div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
body  .yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: .5em 0% .4em 0;
}}

Rinkerカスタマイズ２のパターン２

パナソニック 食器洗い乾燥機（ホワイト）【食洗機】 Panasonic NP-TH1-W
パナソニック(Panasonic)

Amazonと楽天のみの2ボタン横並びボタンになります。

スマホサイズになると画像・キャプション・ボタンが縦並びになります。

ウィンドウサイズを変更して実際の動作を確認してください。

Yahooショッピングは要らないかなーって人はこちら。

ボタンサイズが大きくなるので押してもらいやすくなるかも？

iPhone SEでアイコンに文字列がめりこむようです。サイズ的にそろそろ考慮に入れながら対応するのは厳しいかな？

フォントサイズと文字列の長さを変更して対応しています。

/*--------------------------------------
  Rinker パターン2
--------------------------------------*/
div.yyi-rinker-contents {
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
    margin: 1em 0;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: .7em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin-left: 3%;
    width: 30%;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0 3%;
    width: 100%!important;
}
div.yyi-rinker-title {
    font-size: .9em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 5px 0 10px 0;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #0066c0;
    font-weight: 500;
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
    color: #c45500;
}
div.yyi-rinker-detail div.credit {
    font-size: 10px;
    color: #626262;
    opacity: .7;
    font-family: 'Avenir',sans-serif;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
    font-size: 12px;
    color: #556FB5;
    font-family: 'Avenir',sans-serif;
    text-decoration: none;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: rgba(0,0,0,.38);
    padding-left: 0;
    margin-top: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    position: relative;
    width: 45%;
    height: 45px;
    padding: 0;
    margin: .5em 4% .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    font-weight: 500;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    height: 45px;
    line-height: 45px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 3px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: rgba(0,0,0,.54);
    text-indent: 25%;
    font-size: 14px;
    font-weight: 500;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before {
    content: "\f270";
    color: rgba(0,0,0,.54);
    width:0%;
    font-family: "Font Awesome 5 Brands";
    left: 5%;
    font-size: 21px;
    line-height: 45px;
    font-weight:400;
    display:block;
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #D95656;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
    color: rgba(255,255,255,.9);
    text-indent: 25%;
    font-size: 14px;
    font-weight: 400;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before {
    content: "\f25d";
    color: rgba(255,255,255,.9);
    width:0%;
    font-family: "Font Awesome 5 Free";
    left: 5%;
    font-size: 21px;
    line-height: 45px;
    font-weight:400;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {
    display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;
}
@media (max-width: 1200px) and (min-width: 100px){
div.yyi-rinker-contents ul.yyi-rinker-links {
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-around;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
}
div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
div body .yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: .5em 0% .4em 0;
    width: 42%;
    overflow:hidden;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before {
 left: 7%;
    font-size: 18px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before {
    left: 7%;
    font-size: 18px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    text-indent: 10%;
    font-size: 14px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
    text-indent: 10%;
    font-size: 14px;
}}

まとめ

四角いボタンにしたパターン１と横並びでAmazon、楽天のみのボタンのパターン２のカスタマイズをお送りしました。

前回のカスタマイズが自分的には好みだったので、前回のをサイト全体で有効化しつつ、さらに二つのパターンを有効にするのに苦戦しました。

SANGO+PORIPUとJINではfontawesomeのバージョンが違うため前回と違ってSANGO+PORIPU用から変更ポイントが多いです。

参考：Rinkerカスタマイズ１

パナソニック ロボット掃除機 RULO(ルーロ) ホワイト MC-RS300-W
パナソニック(Panasonic)

ちなみに前回のカスタマイズに関してはボタンが2列ボタンから、スマホでは縦並びのデザインになります。(画面サイズを調整して確認してください。)

カスタマイズ内容に関しては下記にありますのでご覧ください。

Rinkerカスタマイズ for wordpressテーマ JINWordPress用広告プラグインのRinkerのカスタマイズをしています。 元々SANGO用だったものをJIN向けに微調整しています。...
自作テーマからの移行先を「SANGO」と悩んだ末にwordpressテーマ「JIN」を選んだ理由と機能紹介。元々このブログは古のhtmlとcssの知識を駆使して自作のテーマで作成していました。自分のこだわりで「タグベース管理のゆるふわな記事同士...
導入・使用しているwordpressプラグイン一覧他人のブログを見ている時に、このサイトはどんなプラグインを導入しているのだろう？と思うことがあるので、自分のサイトに使用しているプラグイ...

当サイトのRinkerカスタマイズのデフォルトバージョンです。

Rinker カスタマイズ for wordpressテーマ JIN notabo デフォルトこのブログでは広告貼り付け管理にRinkerというプラグインを利用しています。 いくつかRinkerカスタマイズ記事を書きましたが...
CSS wordpress プラグイン
関連記事