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

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

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

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

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

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

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

Before

After

After 2

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

2番目を採用やな

こんな感じに変更（PC）

Before

After

After２

ほんまもんのカード

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

ソニー(SONY)

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

ソニー(SONY)

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズをする準備

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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;

}}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

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

手順まとめ

手順をザクッと説明

変更手順

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

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

いや、１個で十分やろ