ブログ

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

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

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


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

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

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

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

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

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

Rinkerカスタマイズ2のパターン1

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

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

/*--------------------------------------
  Rinker パターン1
--------------------------------------*/
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カスタマイズ2のパターン2

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;
}}

まとめ

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

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

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

参考:Rinkerカスタマイズ1

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

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

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

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

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