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

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

アイキャッチ

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

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

目次

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

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

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

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

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

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

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

当ブログでは音響関連用品の紹介もしているのでサウンドハウスのリンクを張ることが多いのですが、カッテネのボタンはデフォルトでは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;」にはメインの明るい色を、他の部分の色は影やマウスカーソルを置いたときの色になるため、メインの色よりやや暗めの色を設定しています。

HTMLを編集

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

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

カッテネHTML 追加したリンクボタンの記法

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

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

もともとのCSSやHTMLを参考にして追加しただけですが、カスタマイズの際にはぜひ参考にしてみてください。

【AD】弓木奈於さんを応援しています
Next Previous
まだコメントはありません
コメントする
comment url