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

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事では商品管理プラグインのRInkerをシンプルにカスタマイズした方法を説明。

参考商品リンク管理プラグインRinker（リンカー）の公式サイトおやこそだて

前のRinkerカスタマイズはこちら

Rinkerのカスタマイズ！デザインをシンプルにしてみる

こんな感じに変更（スマホ）

Before

After

After 2

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

2番目を採用やな

こんな感じに変更（PC）

Before

After

After２

ほんまもんのカード

SIMフリースマートフォン VAIO Phone　VA-10J　日本通信

ソニー(SONY)

¥9,685 (2019/02/22 21:46:24時点 Amazon調べ-詳細)

SIMフリースマートフォン VAIO Phone　VA-10J　日本通信

ソニー(SONY)

¥9,685 (2019/02/22 21:46:24時点 Amazon調べ-詳細)

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズをする準備
2 カスタマイズのコードを追加
- 2.1 パターン１のカスタマイズ
- 2.2 パターン２のカスタマイズ
3 手順まとめ

カスタマイズをする準備

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

ブログのカスタマイズを加速させる「追加CSS」の使い方

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

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

コード（style.css）

style.css（追加するコード：リンカーカスタマイズ）

/*--------------------------------------
  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: 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;
}}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

/*--------------------------------------

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

}}

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

コード（style.css）

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

/*--------------------------------------

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;

}

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

}

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;

}}

確認の手順

保存ボタンを押す

ブラウザでキャッシュを削除して更新

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

手順まとめ

手順をザクッと説明

変更手順

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

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

いや、１個で十分やろ