こんにちはNAOです。

 

最近、Rinker(リンカー )を使っているんですが、

どうもデザインや文字が気に入らなかったので、

カスタマイズをしてみようと思ったのですが、

ネット上にある情報は、

ショートコードの最後にコードを入れるカスタマイズが多く、

一括で編集ができなかったため、

すごく悩んでいました。

 

そこで、私のいろんな知り合いの方に聞いてみたところ、

一括で編集できる方法があるということで、

実際に変更してみたところ、

みごとにカスタマイズできましたので、

今日はRinker(リンカー )のプラグインのカスタマイズについて

詳しく、ご紹介していきたいと思います。

 

Rinkerをカスタマイズした点は?(PC)

カスタマイズしたものをご覧いただく前に、

まずはRinker(リンカー )で作成した

PCのデフォルトのデザインが上記になります。

 

とてもシンプルですね。

そして上記が、

カスタマイズをしたデザインになります。

 

PC表示でカスタマイズした点は、

  • リンクテキスト色を青色に変更
  • ボタンの色を変更
  • ボタンを丸めに変更
  • ボタンに『で探す』を追加
  • マウスオーバーで凹む+ボタン色変更

になります。

 

 

Rinkerをカスタマイズした点は?(スマホ、タブレット)

まずはRinker(リンカー )で作成した

スマホ、タブレットのデフォルトのデザインが上記になります。

 

うーん、ボタンが小さく、

何かとても見にくいですよね。

そしてこちらが、

Rinker(リンカー )をカスタマイズした

スマホ、タブレットのデザインになります。

 

スマホ、タブレットの表示でカスタマイズした点は、

  • リンクテキスト色を青色に変更
  • ボタンの色を変更
  • ボタンを丸めに変更
  • ボタンに『で探す』を追加
  • 画像リンクとボタンを縦並びに変更

になります。

 

画像リンクも大きく表示させることで、

ユーザービリティも上がるのではないかと思います。

 

Rinker(リンカー )を一括でカスタマイズする手順は?

Rinker(リンカー )を上記のようにカスタマイズするには、

2つの作業が必要になってきます。

 

こちらでは一つずつご紹介していきたいと思います。

 

Rinkerの商品ボタンの文字を一括でカスタマイズする方法!

Rinkerの商品ボタンの文字を一括で変える方法は、

『function.php』をイジることが有名ですが、

こちらでは、少し違った方法をご紹介していきたいと思います。

 

まずは、カスタマイズしたいブログサイトの管理画面に移り、

『プラグイン』→『プラグイン編集』

をクリックしましょう。

 

 

次に右上の『編集するプラグインを選択』

をクリックし『Rinker』をクリックしましょう。

 

 

次は『yyi-rinker.php』をクリックしましょう。

 

 

画像と同じくらいの行数に

上記のような文言があるので、

カスタマイズしたい文言に変更しましょう。

 

 

今回の場合、

ボタンの文字は『で探す』を追加したかったので、

上記のような文言にしました。

 

そして、最後はしっかりと

『ファイルを更新』

をクリックして完了です。

 

 

Rinker(リンカー )の商品デザインを一括でカスタマイズする方法!

こちらはrinkerの文字以外のカスタマイズになります。

 

まず下記のコードをすべてコピーしましょう。

/*=================================================================================
RINKER
=================================================================================*/
div.yyi-rinker-contents {
width: 98%;
height: auto;
margin: 36px auto;
font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’,Helvetica, Meiryo, sans-serif;
line-height: 1.5;
background-color: #fafafa;
overflow: hidden;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
border: unset;
}
div.yyi-rinker-contents a {
transition: 0.8s ;
}
div.yyi-rinker-contents div.yyi-rinker-box {
padding: 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
width: 150px;
min-width:150px;
margin: 0 14px 0 0;
text-align: center;
background: #fff;
box-sizing: border-box;
}
div.yyi-rinker-contents div.yyi-rinker-image a {
width: 100%;
}
/**** タイトル ****/
div.yyi-rinker-contents div.yyi-rinker-title a {
border-bottom: 1px solid; /* テキスト下線 */
color:#285EFF; /* テキストリンクカラー */
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
/**** Credit・価格欄 ****/
div.yyi-rinker-contents div.yyi-rinker-detail {
font-size: 10px;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
color: #999;
}
/****ボタン****/
div.yyi-rinker-contents ul.yyi-rinker-links li {
border-radius: 0px;
min-width:128px;
text-align: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding:0;
height: auto;
border-radius: 8px;
font-size: 0.8em;
box-sizing: border-box;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
background: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
background: #ff9901;
border: 2px solid #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
background: #bf0000;
border: 2px solid #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{
background: #ff0033;
border: 2px solid #ff0033;
}
/****ボタンマウスオーバー時****/
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
background: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover {
color: #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover {
color: #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
color: #ff0033;
}
@media screen and (max-width: 768px){
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image{
width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
text-align: center;
width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 32.33%;
margin: 0.5%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0.5px;
}
}
@media screen and (max-width: 480px) {
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 99%;
margin: 0.7% 0.5%;
}
}

 

 

次にカスタマイズしたいブログサイトの管理画面に移り、

『プラグイン』→『プラグイン編集』

をクリックしましょう。

 

 

次に右上の『編集するプラグインを選択』

をクリックし『Rinker』をクリックしましょう。

 

 

 

次に『style.css』をクリック。

 

 

次は、最下部までスクロールしていき、

一番最後に先ほどコピーしたコードを貼り付けるだけで完了です。

※まるまるコピペOKですがあくまでも自己責任でお願いしますね。

 

 

ここまでが今回、

私が実施したカスタマイズになります。

 

このカスタマイズにより、

私は報酬額も上がりましたので、

ぜひ、あなたも試してみてくださいね。

 

以上、今回のようにアフィリエイトに関することだったり、

ブログで稼ぐノウハウを今だけ無料でメルマガ講座にて公開しています。

 

更に全22冊、約430ページの『教科書』もプレゼントしていますので、

是非、メルマガ講座にご登録いただきダウンロードして下さいね。

 

NAOメルマガ講座では無料でご質問なども受け付けていますので、

下記よりお申し込み下さい↓↓