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

このブログでは広告貼り付け管理にRinkerというプラグインを利用しています。
このプラグイン自体もなかなかに神ってるんですが、プラグイン自体の紹介については今回割愛します。

SANGO用Rinkerカスタマイズ

今回、Rinkerのスマホ表示時に画像とボタンが左右に分かれるのがナントカならないかな、と思っていたところに、うってつけのwordpressテーマSANGO向けのカスタマイズ記事があったので、それをwordpressテーマJIN向けに修正してみました。

SANGO向けはBear face（@Bearface18）さんの下記の記事をみてください。

細かな仕上がりに関してもBear faceさんの記事を参照してください。

変更すると下の画像のように

になります。

当記事最下段にもカスタマイズ結果を載せてあります。

今回の記事も含め、Bear faceさんはブログデザインがすごいおしゃれにまとまっていて、記事のクオリティも高いので、私も今後に注目しています。

JINの子テーマダウンロード

テーマのカスタマイズを行う際にはJINの子テーマをダウンロードして、カスタマイズを適応してください。

カスタマイズ実装

以下のコードをダウンロードした子テーマのstyle.cssにコピペしてください。
枠線およびボタンの色は自分のお好みの色に変更してお使いください。

/*--------------------------------------
Rinkerのデザイン変更
--------------------------------------*/
/*-----全体-----*/
div.yyi-rinker-contents {/*内容（全体）*/
    border: solid 1px #42424230;/*枠線の種類・幅・色*/
    border-radius: 10px;/*枠線の丸み（上　右）*/
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);/*影*/
}
div.yyi-rinker-contents div.yyi-rinker-box {/*内容（中身）*/
    padding: 1em 0;/*余白（中）*/
}
/*-----左側（画像）-----*/
div.yyi-rinker-contents div.yyi-rinker-image {/*画像*/
    margin-left: 3%;/*左の余白*/
    width: 30%;/*画像の幅*/
}
/*-----右側（商品名やボタンなど）-----*/
div.yyi-rinker-info {/*右側全体*/
    padding: 0 3%;/*左右の余白*/
    width: 100%;/*右側全体の幅*/
}
.yyi-rinker-title {/*商品名*/
    font-size: .9em;/*文字の大きさ*/
}
div.yyi-rinker-contents div.yyi-rinker-title p {/*タイトル*/
    margin: 0;/*タイトルの余白*/
}
div.yyi-rinker-contents div.yyi-rinker-title a {/*タイトル*/
    color: #42424290;/*タイトルの文字色*/
}
div.yyi-rinker-contents div.yyi-rinker-detail {/*販売者と価格*/
    font-size: .8em;/*文字の大きさ*/
    color: #42424280;/*文字の色*/
    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 li {/*すべてのボタン*/
    width: 42%;/*幅（2列になるように）*/
    padding: 0 .7em;/*左右の余白（ボタン内）*/
    margin: .5em 1.5em .4em 0;/*左側の余白だけ0（ボタン外）*/
    box-shadow: 0 2px 3px rgba(0,0,0,.2);/*影*/
    font-size: .8em;/*文字の大きさ*/
    overflow:hidden;
}

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 {/*Amazon*/
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
    background: #D95656;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
    background: #FF4D4D;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 {/*自由URL１*/
    background: #4DFF88;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {/*自由URL２*/
    background: #4D4DFF;
}
/*-----マウスホバー（ボタン）-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);/*優しく浮き上がる影*/
}
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 screen and (max-width: 767px){/*スマホ表示用（ブレイクポイント767px）*/
/*-----全体-----*/
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;/*商品名やボタンを中央表示*/
    overflow:hidden;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
    display: block;/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
    width: 90%;/*横幅いっぱい*/
    margin: .5em 0;/*上下の余白　左右の余白削除*/
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/
    padding: 0;/*文字の余計な余白を削除*/
}}

参考元記事からの変更点

参考本元記事が更新されている場合に、この記事が新しいものに更新されていない場合でも、問題無いように変更点を記しておきます。サイズ周りに関しては私の確認できる範囲でのみ行っているので、はみ出たり足りない場合があるかもしれません。

• 2列表示時の横幅変更：45%から42%へ
• 一部横幅では文字がはみ出るのでoverflow:hidden;追加

div.yyi-rinker-contents ul.yyi-rinker-links li {/*すべてのボタン*/
    width: 42%;/*幅（2列になるように）*/
    padding: 0 .7em;/*左右の余白（ボタン内）*/
    margin: .5em 1.5em .4em 0;/*左側の余白だけ0（ボタン外）*/
    box-shadow: 0 2px 3px rgba(0,0,0,.2);/*影*/
    font-size: .8em;/*文字の大きさ*/
    overflow:hidden;
}

• 自由URL1と自由URL2用の色を追加

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 {/*自由URL１*/
    background: #4DFF88;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {/*自由URL２*/
    background: #4D4DFF;
}

• メディアクエリの切り替え幅をJINに合わせて767pxへ

@media screen and (max-width: 767px){/*スマホ表示用（ブレイクポイント767px）*/

メディアクエリの切り替え横幅の767pxでもいいですが、個人的好みでこのサイトでは横幅1200pxくらいに変更しています。

• ボタンの文字数が多い場合のはみ出し処理にoverflow:hidden;追加

/*-----商品名やボタンなど-----*/
div.yyi-rinker-info {/*全体*/
    padding: 0;/*余白削除*/
    margin: auto;/*中央揃え*/
    width: 87%;/*横幅*/
    text-align: center;/*商品名やボタンを中央表示*/
    overflow:hidden;
}

• 各ショップボタン横幅変更：100%から93%へ

div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
    width: 93%;/*横幅いっぱい*/
    margin: .5em 0;/*上下の余白　左右の余白削除*/
}

ボタン文字列の変更

ボタンの文字列の変更はプラグインのAddQuickTagで追加したエディタボタンで行っています。

追加した商品タグの後ろカッコ前に合わせてボタンを押すだけです。

自作テーマからの移行先を「SANGO」と悩んだ末にwordpressテーマ「JIN」を選んだ理由と機能紹介。元々このブログは古のhtmlとcssの知識を駆使して自作のテーマで作成していました。自分のこだわりで「タグベース管理のゆるふわな記事同士...

リンクテスト

カスタマイズ結果実物

今回のRinkerカスタマイズの見やすさおよびボタンサイズ拡大バージョン。

Rinkerカスタマイズ for wordpressテーマ JIN 1 tune 2このブログでは広告貼り付け管理にRinkerというプラグインを利用しています。 このプラグイン自体もなかなかに神ってるんですが、プラグ...

新カスタマイズが更新されていたのでJIN用に対応しました。

Rinkerカスタマイズ for wordpressテーマ JIN 2前回に引き続きBear face（@Bearface18）さんのRinkerカスタマイズ記事を元に丸ｐ・・・参考に今回もRinkerのカ...

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

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