【SANGOを自分でカスタマイズ】Rinkerのデザインを変えてみる2

リンカーカスタマイズその2

カスタマイズでのおねがい
カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では
商品管理プラグインのRInkerをシンプルにカスタマイズした方法を説明。
参考 商品リンク管理プラグインRinker(リンカー)の公式サイトおやこそだて
前のRinkerカスタマイズはこちら
【SANGOを自分でカスタマイズ】Rinkerのデザインを変えてみる

こんな感じに変更(スマホ)

Before

rinker-カスタマイズ前スマホ

After

After 2

MENくん

めっちゃシンプルにしてみました!

くま1号

2番目を採用やな


こんな感じに変更(PC)

Before

rinker-カスタマイズ前

After

After2



ほんまもんのカード

created by Rinker
ソニー(SONY)
¥9,979 (2018/10/16 04:31:47時点 Amazon調べ-詳細)

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズをする準備

コードを記入する準備

(1)~(3)のどれかでコードを記入する準備をします。

(1)追加CSSを使ってコードを記入する方

手順 WordPress外観カスタマイズ追加CSS
追加CSSについてはこちら
カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方  

(2)テーマ編集を使ってコードを記入する方

手順 WordPress外観テーマの編集

子テーマのstyle.cssが選択されていることを確認しておきます。

 

(3)FTPソフトを使ってコードを記入する方

手順 FTPソフトを起動自分のサイトに接続style.cssを開くエディタソフトでコードを表示
 
MENくん

とりあえずこれで、コードを記入する準備は完了です

カスタマイズのコードを追加

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

style.css(追加するコード:リンカーカスタマイズ)
/*--------------------------------------
  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: 100%;
    color: #3A4D66;
    font-family: "FontAwesome";
    left: 0;
    font-size: 30px;
    line-height: 60px;
}
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: 100%;
    color: #fff;
    font-family: "FontAwesome";
    left: 0;
    font-size: 30px;
    line-height: 60px;
}
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: 100%;
    color: #fff;
    font-family: "FontAwesome";
    left: 0;
    font-size: 30px;
    line-height: 60px;
}
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: 500px) and (min-width: 100px){
div.yyi-rinker-contents ul.yyi-rinker-links {
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-between;
}
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;
}}

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

style.css(追加するコード:リンカーカスタマイズ)
/*--------------------------------------
  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: 17px;
    font-weight: 500;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before {
    content: "\f270";
    color: rgba(0,0,0,.54);
    font-family: "FontAwesome";
    left: 5%;
    font-size: 21px;
    line-height: 45px;
}
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: 17px;
    font-weight: 400;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before {
    content: "\f25d";
    color: rgba(255,255,255,.9);
    font-family: "FontAwesome";
    left: 5%;
    font-size: 21px;
    line-height: 45px;
}
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: 1000px) and (min-width: 100px){
div.yyi-rinker-contents ul.yyi-rinker-links {
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-between;
}
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: 48.5%;
}
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;
}}

 

コードを追加したあとにちゃんと反映されているか確認します。
手順 style.cssを保存ブラウザでキャッシュを削除して更新(ctl+F5)
MENくん

長いコードで頭がおかしくなりそうです。

手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • リンカーの設定
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

もっとたくさん考えてたけど、コードを書くのが大変過ぎて、、、

くま1号

いや、1個で十分やろ

 

 
ブログの執筆を減速させるソフト <イラストレーター・フォトショップ>
MENくん

記事を書くのに集中したいブロガーは絶対に買っちゃダメだよ☆

くま1号

もし買うなら、せめて安く買おうね

アドビの漫画 アドビの漫画2
フォトショ・イラレはこちら

1.お申込み方法をクリック

2.キャンペーンのバナーをクリック

3.お申込みはこちらをクリック