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

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

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

 

デフォルトデザイン

Rinkderのデフォルトのデザイン

 

完成形

今回カスタマイズした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は、作者である「やよい」さんの公式サイトからダウンロードできます。

 

コメント