カッテネのボタン色をカスタマイズ

今回は当ブログで利用しているカッテネのボタン色をカスタマイズする方法を備忘録も兼ねて紹介します。

商品リンク紹介ツール「カッテネ」

当ブログでは、購入・レビューした商品の紹介に「カッテネ」という以下のようなリンクを整理するツールを使っています。

UniTune Clip クリップチューナー

TC ELECTRONIC (ティーシーエレクトロニック)

Amazon

サウンドハウス

制作者さまサイトはこちら↓

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ｜WebFood

カエレバやヨメレバは、１商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。ですが、評判の割に、実際に使ってみると結構難しい。なので、もっと簡単に使えるカッテネというものを作りました。カッテネとは？こんな感じのものです。カエレバやヨメレバのように、一つの商品に

webfood.info

当ブログでは音響関連用品の紹介もしているのでサウンドハウスのリンクを張ることが多いのですが、カッテネのボタンはorange, blue, red, green, pink の5色が用意されておりサウンドハウスのブランドカラーである紫がありません。

そこで、namimoriはカッテネのHTMLおよびCSSをカスタマイズすることでデフォルトにはないボタン色を設定しています。

なお、カッテネの基本的な使い方は上記の制作者さまサイトでご確認ください。当ブログでは上記ページ内「WordPress以外の場合の使い方」部分の方法でカッテネを利用しています。

CSSにボタン色を追加

カッテネのCSSの最後の部分は各ボタン色の定義が記述されています。他の色の部分を参考にして、namimoriは以下のように記述したものをカッテネのCSSの最後に追加しています。

/*紫ボタン追加*/
.kattene__btn.__purple {
  background-color: #955F91;
  -webkit-box-shadow: 0 5px 0 #785283;
  -moz-box-shadow: 0 5px 0 #785283;
  box-shadow: 0 5px 0 #785283;
  -o-box-shadow: 0 5px 0 #785283;
  -ms-box-shadow: 0 5px 0 #785283;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .kattene__btn.__purple:hover {
    background-color: #785283; }

  .kattene__btn.__purple i {
    font-weight: bold; }

    .kattene__btn.__purple i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

ここで、「.kattene__btn.__purple」等の「__purple」部分は任意の名前を設定します。

「background-color: #xxxxxx;」にはメインの明るい色を、他の部分の色は影やマウスカーソルを置いたときの色になるため、メインの色よりやや暗めの色を設定しています。

HTMLを編集

ブログ記事内に記述するカッテネのHTML内のaタグのクラスを編集します。デフォルトで「__orange」などと記述されていた部分に、さきほどCSS内に設定した名前を記述することでボタンの色を変えます。

namimoriはサウンドハウスのリンクボタン部分のHTMLを次のように記述しています。

以上で当ブログに普段掲載されているカッテネの外観が設定されました。

サウンドハウス以外のリンクボタンを設定する際にも参考に。