>共働きパパの人生をより良くするブログ

プラグイン「rinker」の表示ボタンをSANGO風にするカスタマイズ

プラグインRinkerのSANGO風ボタンカスタマイズ

「rinker」はやよい@在宅フリーランスPG&ブロガーさんが製作された、

・amazon
・楽天市場
・yahooショッピング(もしもアフィリエイト)(有料)

のアフィリエイトリンクをwordpressの管理画面から挿入できるようになるプラグイン。

リンク管理プラグインRinker(リンカー)の公式サイト

参考 Rinkerベーシック版(無料)BOOTH

このアフィリエイトリンクボタンをSANGO風にするカスタマイズを作りました。
SANGOユーザーで、「rinker」の表示をカスタマイズしたい方は使ってみてください!

コピペOKのコード

以下のコードを「外観」→「カスタマイズ」→「追加CSS」に追加してください。

コード


/* rinker sangoカスタマイズ */
div.yyi-rinker-contents ul.yyi-rinker-links{
    display: inline-block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
    display: inline-block;
    height: 37px;
    margin: 5px 10px 5px 0;
    padding: 0 12px;
    border-radius: 3px;
    background: #73c1ea;
    box-shadow: 0 8px 15px -5px rgba(0,0,0,.25);
    font-size: .95em;
    font-weight: bold;
    vertical-align: middle;
    line-height: 37px;
    transition: .3s ease-in-out;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #ffb36b;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink{
    background: #ea7373;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
    height: 37px;
    line-height: 37px;
    font-size: 0.95em;
    padding-left: 10px;
    padding-right: 0;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a:before{
    padding-right: 3px;
    font-family: FontAwesome;
    content: "\f0da"!important; 
    right: auto;
}

以上です!

あなたにはこちらの記事もおすすめ
ネタ発想からリライトまで!ブログ記事の書き方まとめ