Rinkerのボタンをカスタマイズしてみた

WordPressのプラグインRinker（リンカー）が便利ですね。

ショートコードを貼り付けるだけで簡単なのですが、ちょこっとカスタマイズしてみました。

 

【デフォルトデザイン】

 

【完成形】

 

カスタマイズしたのはボタンです。

1. フォントの太字を普通に
2. 文字を少し小さく（その分paddingをやや広く）
3. 文字の色と背景色を逆転

カスタマイズしたコードはここに書く

カスタマイズするコードを書く場所は、

外観 => カスタマイズ => 追加のCSS

で表示される「付属のCSSエディタ」を開いて行います。

このとき実際に貼り付けたページを右に表示しておくと、入力したばかりの設定が反映されるのでわかりやすいです。

 

 

ボタンのカスタマイズ

ボタンの太字の変更

div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-weight: normal;
    font-size: 0.85em;
    padding: 0 22px;
}

font-weightを「normal」（デフォルトはbold）

文字のサイズやや小さく（0.85em）にしました（デフォルトは0.9em）

しました。

文字を小さくした分だけボタンの文字の左右の余白（padding）を22pxに増やしています（デフォルトは20px）。

ボタンの影をなくす

ボタンの影を定義している部分を無効にしました。

div.yyi-rinker-contents ul.yyi-rinker-links li {
　　　　box-shadow: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
　　　　box-shadow: none;
}

 

ボタンの枠、文字の色、背景の色を直す

ボタンの枠を表示させるようにします。

div.yyi-rinker-contents ul.yyi-rinker-links li {
    border: solid;
    border-width: 2px;
}

 

色は、Amazon、楽天、Yahooショッピングそれぞれ個別に設定しています。

まずAmazonの設定。

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #f6a306;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    border-color: #f6a306;
    background: none;
}

楽天、Yahooショッピングも同じように設定しました。

完成したコード

できあがったのが次のコードです。

 

div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-weight: normal;
    font-size: 0.85em;
    padding: 0 22px;
}

div.yyi-rinker-contents ul.yyi-rinker-links li {
    box-shadow: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li {
    border: solid;
    border-width: 2px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #f6a306;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    border-color: #f6a306;
    background: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    border-color: #cf4944;
    background: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a {
    color: #cf4944;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    border-color: #51a7e8;
    background: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a {
    color: #51a7e8;
}

これをコピペして、外観 => カスタマイズ => 追加のCSSで表示される「付属のCSSエディタ」に貼り付ければ同じものが表示されます。

元のデータはどこにある？

カスタマイズの元になった定義は、ダウンロードしたファイル「yyi-rinker-1.1.1.zip」を展開するとできる「yyi-rinker-1.1.1フォルダ」の中の「style.css」にあります。

自分が直したいデザインの設定がどこにあるのか見つけるにはstyle.cssを探してみてください。

＊＊＊

Rinkerは、作者である「やよい」さんの公式サイトからダウンロードできます。