Rinker(リンカー)のお洒落で可愛いカスタマイズ方法!


この記事はこんな人にオススメ
  • Rinkerをカスタマイズしたい!
  • せっかくのRinkerをもっと可愛くしたい!

「10秒」で商品紹介リンクが作成できる、最強プラグイン「Rinker」は以前に紹介しました。

自分のオススメの商品を簡単にみんなにシェアすることができます。

今回は、そんな最強プラグインを、さらに最強にするためのカスタマイズ方法についてご紹介いたします。

僕は、HTMLやCSSの知識がほぼ0なので、たくさんある記事を検索した結果、「ぴょんなことから」さんの記事が素晴らしかったの参考にさせていただきました。

カスタマイズ後は、このようになります⬇︎⬇︎

「〜で探す」の付け方

「〜で探す」のつけ方をご紹介します!

このリンクを⬇︎⬇︎

このリンク⬇︎⬇︎のようにします!

ひげけん
KENTAさん、なんで、「〜で探す」をつけるんですか?
KENTA
読者にとって、「〜で探す」っていう言葉が入っていると、買わされてる感じもなく、気軽にリンクに飛ぶことができるよね!
ひげけん
なるほど!
KENTA
逆に「Amazon」「楽天市場」だけだと、

なんか「このリンクに飛んで、ここから商品を買えッ!」って感じるよね。

ひげけん
確かにそうですね!

(ちょっと大げさ。。)

「〜で探す」の挿入方法

挿入方法は簡単!

商品リンクを作成したら、IDの後ろに、

alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す]

を追記していきます。(⬆︎⬆︎コピペOK!)

 

挿入して、⬇︎⬇︎このようになればOK!

 

プレビューで確認すれば、このように、「Amazonで探す」となっています!

 

ひげけん
あら、簡単ですね!
KENTA
そう!

コピペですぐにできるので、是非「〜で探す」を挿入してみよう!




Rinkerのデザインをカスタマイズする方法!

もともとのデザインがこちら⬇︎⬇︎

 

CSSでカスタマイズ後のデザインがこちら⬇︎⬇︎

ひげけん
観やすくて、矢印もあって、いい感じですね!
KENTA
そうでしょ!

これは、以下のCSSをコピペで、出来るので是非やってみて!

CSSに追加するコード

以下のCSSを、「外観」⇨「テーマエディター(テーマ編集)」⇨「スタイルシート(style.css)」に貼り付け

場所は、どこでも大丈夫ですが、一番下が無難でしょう!

参考:「ぴょんなことから」さんの記事
※(CSS)の知識がないので、非常にありがたいです。感謝します。

色を変更する場合

リンクの色を変更したい場合は、上記リンク内にある、以下のリンクの部分を編集すると、色が変更できます!

例)#ffdab9; /*– Amazonリンクの背景色 –*/
#ffc266; /*– Amazonリンクの背景色 –*/

といったように行います。

お好みの色を探して出来上がったら完成です!
※色みのコードがわからない方はこちらから探せます!

早速Rinkerをカスタマイズしよう!

以上、Rinkerのカスタマイズ方法でした!

可愛いデザインにして、あなたのオススメを自信持って紹介して行きましょう!



\けんたのぶろぐのテンプレート/
WPテーマ【ストーク】
初心者でも超簡単にお洒落なサイトが作れる!
カスタマイズも楽々!
初心者にはおすすめのテーマ♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です