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

namimori

2022/1/11

2025/3/2

本サイトには、広告あるいはアフィリエイトプログラムによるアソシエイトリンクが含まれる場合があります。

アイキャッチ

明けましておめでとうございます。namimoriです。本年も当ブログをよろしくお願いします。

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

商品リンク紹介ツール「カッテネ」
CSSにボタン色を追加
HTMLを編集
サウンドハウス以外のリンクボタンを設定する際にも参考に。

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

当ブログでは、購入・レビューした商品の紹介に「カッテネ」という以下のようなリンクを整理するツールを使っています。（2025年3月追記：現在、カッテネのCSSを軽量化・修正したものを使っており、オリジナルとはデザイン・レイアウトが異なります。記事内のコードはもとのカッテネのHTML・CSSに準拠します。）

UniTune Clip クリップチューナー

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

サウンドハウス

Amazon

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

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

当ブログでは音響関連用品の紹介もしているのでサウンドハウスのリンクを張ることが多いのですが、カッテネのボタンはデフォルトでは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」部分には任意のクラス名を設定します。もとのCSSと統一して「__(色名)」とするのが良いでしょう。

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