カテゴリー
もくじ

コクーンCSSカスタム|おしゃれな動きをするボタンを作ってみた！

まいどおおきに！コクーンの無料カスタム相談をしています。おおもと(@so88qa)です

この記事は、マウスオーバー時の動きがおしゃれなボタンの作り方を紹介しています。

動きはコレ⤵︎（gifをクリックして拡大ができるよ！）

ワードプレス無料テーマCoccon(コクーン)の物販リンクのボタンを簡単コピペで改造できるので、気になる人はぜひ最後まで読み進めてくださいね！

もくじ

おしゃれなアマゾンボタンの作り方

.shoplinkamazon a,.shoplinkamazon a::after{
/*○○sでアニメーションのスピードを調整*/
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

.shoplinkamazon a {
background-color:#ffb36b;/*マウスオーバー前のアマゾンボタンの背景の色*/
border:solid 2px #ffb36b;/*マウスオーバー前のアマゾンボタンの線の色*/
position: relative;
display: block;
overflow: hidden;
}

.shoplinkamazon a::before,.shoplinkamazon a::after{
background-color:#fff;/*マウスオーバー前のアマゾンボタンの背景の色*/
content: '';
position: absolute;
z-index: -1;
}

.shoplinkamazon a:hover{
color:#ffb36b;/*マウスオーバー後のアマゾンボタンの文字の色*/
background-color:#fff;/*マウスオーバー後のアマゾンボタンの背景の色*/
border:solid 2px #ffb36b;/*マウスオーバー後のアマゾンボタンの線の色*/
}

.shoplinkamazon a:after{
height: 100%;
left: -35%;/*left→lightにすると右から左に変化します。*/
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.shoplinkamazon a:hover:after{
height: 100%;
width: 135%;
}

おしゃれな楽天ボタンの作り方

.shoplinkrakuten a,.shoplinkrakuten a::after{
/*○○sでアニメーションのスピードを調整*/
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

.shoplinkrakuten a {
background-color:#ea7373;/*マウスオーバー前の楽天ボタンの背景の色*/
border:solid 2px #ea7373;/*マウスオーバー前の楽天ボタンの線の色*/
position: relative;
display: block;
overflow: hidden;
}

.shoplinkrakuten a::before,.shoplinkrakuten a::after{
background-color:#fff;/*マウスオーバー前の楽天ボタンの文字の色*/
content: '';
position: absolute;
z-index: -1;
}

.shoplinkrakuten a:hover{
color:#ea7373;/*マウスオーバー後の楽天ボタンの文字の色*/
background-color:#fff;/*マウスオーバー後の楽天ボタンの背景の色*/
border:solid 2px #ea7373;/*マウスオーバー後の楽天ボタンの線の色*/
}

.shoplinkrakuten a:after{
height: 0;
left: 50%;
top: 50%;
width: 0;
}
.shoplinkrakuten a:hover:after{
height: 100%;
left: 0;
top: 0;
width: 100%;
}

おしゃれなボタンカスタムのまとめ

今回は２種類のカスタマイズを紹介しました。

興味があれば、ぜひコピペをしてくださいね！

コクーンの標準設定で、マウスオーバー時に少し薄くなります。

そこを緩和させたい場合は

このコードを追記してください。（「opacity: 1」にすると今回のカスタマイズの動きがなくなるので注意）

あわせて読みたい
物販アフィリボタンのクリック率を向上させるカスタマイズをしてみた！ まいどおおきに！おおもと(@so88qa)です！ みなさん、儲けてまっか？ ぼくは、最近少しずつアマゾン・楽天の物販をはじめて成果が出てきています(*´∀｀*） 物販リンクは…
テーマ ブログ
Cocoon おすすめ カスタマイズ
Share Now

コメント一覧 （15件）

  • こんにちは
    初心者なんですけど、そのコードをどこに入力すればよろしいのでしょうか？
    初歩的な質問ですみません！

    返信

    • はたさん、こんにちわ

      ワードプレスの管理画面から

      外観→テーマエディターStylesheet

      にコードをコピペすればOKですよ！

      返信

  • おおもとさん

    ご体調大丈夫でしょうか？
    cocoonが本日の更新でモバイル向けのレイアウトが変わってしまったようで
    以前教えていただいたカスタマズではうまくいかなくなってしまいました。
    いったんデフォルトの設定に戻してみました。

    返信

  • おおもとさん、質問です。

    PCでは、ワンクリックでリンクに飛ぶのですが、スマホだと二回押さないとリンクに飛びません。

    これが仕様なのでしょうか?

    リンクを中ほどに入れてます。

    https://chan-bike.com/spoke

    出来たら、スマホでもワンクリックでリンクに飛んだほうが、ユーザーにも分かりやすいと思うのですが、私のやり方が違うのでしょうか?

    返信

  • カスタマイズ記事助かっております。

    現在Amazonjsを使っており、こちらのカスタマイズ記事を参考にcssを調整して
    表示させています。
    https://murakumo25.com/amazonjs-my-custom/22146

    fontawesome使って各ボタンのテキストの頭にAmazonマークなどのシンボルをつけるのが気に入っているのですが、このようなカスタマイズをcocoonの商品リンクのcssでカスタマイズするにはどうすればよいでしょうか。

    また商品リンク内のテキスト（商品名）を太字やほかの色に変更するにはどうすればよいでしょうか？

    返信

    • お待たせいたしました。

      若干複雑になった上に、マウスを外した時のホバーがほんの少しだけずれていますが
      形ができたのでコードを送らせていただきます。（斜めでホバーが移動するので、合わすのが難しい・・・・）

      コード↓

      .shoplinkamazon a::before{
      content: '\f270 ';　/アマゾンマーク/
      font-family: 'FontAwesome';
      color:#fff;/アマゾンマークの色/
      background-color:#ffb36b;/アマゾンマークの背景色/
      position: absolute;
      margin-left:-1.2em;/アマゾンマークの位置/
      z-index: 0;
      transition: .5s; /ホバーのスピード/
      }
      .shoplinkamazon a:hover::before{
      content: '\f270 ';/アマゾンマーク/
      font-family: 'FontAwesome';
      color:#ffb36b;/アマゾンマークの色/
      background-color:#fff;/アマゾンマークの背景色/
      position: absolute;
      margin-left:-1.2em;/アマゾンマークの位置/
      z-index: 0;
      transition: .1s;/ホバーのスピード/

      このコードをそのままコピペしていただければ形になると思います。

      なお、
      ヤフーマーク→content: ‘\f19e ‘
      楽天マークはありません。

      返信

    • あーーー
      忘れてた^^;
      商品名の色や字の太さは、今記事を書いていますが、先にお伝えしますね

      /商品名の変更/
      .product-item-title-link{
      color:#555;/商品名の色変更/
      text-decoration:none;/商品名の下線を消す/
      font-weight:bold/商品名を太字に変更/
      }

      これをコピペしてくださいね

      返信

  • おおもとさん、こんにちは。

    cocoonのフォーラムから50000バイト以上のampの質問から来ました。

    こちらの、楽天とamazonのボタンのcssをコピーしたのですが、yahooが動いてくれません。

    ローカルで実験しています。

    yahooは自分で作成して適応させれば良いのでしょうか?

    返信

    • chanさん、こんにちは！

      ヤフーのボタンの動きは、アマゾンボタンをちょっと改良するだけなんです。（左から右に変えるだけ）
      ただ、記事に書いてないのは不親切すぎましたね^^;

      コードは↓をコピペしてください(´⺲`)

      .shoplinkyahoo a,.shoplinkyahoo a::after{
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      }

      .shoplinkyahoo a {
      background-color:#ff5722;
      border:solid 2px #ff5722;
      position: relative;
      display: block;
      overflow: hidden;
      }

      .shoplinkyahoo a::before,.shoplinkyahoo a::after{
      background-color:#fff;
      content: '';
      position: absolute;
      z-index: -1;
      }

      .shoplinkyahoo a:hover{
      color:#ff5722;
      background-color:#fff;
      border:solid 2px #ff5722;
      }

      .shoplinkyahoo a:after{
      height: 100%;
      right: -35%;
      top: 0;
      transform: skew(50deg);
      transition-duration: 0.6s;
      transform-origin: top right;
      width: 0;
      }
      .shoplinkyahoo a:hover:after{
      height: 100%;
      width: 135%;
      }

      分かりにくい点がありましたら、気軽に質問してくださいね！

      返信

      • 出来ました!

        ありがとうございます。

        また、COCOONネタ、楽しみにしておきます!

        返信

コメントする

CAPTCHA

もくじ
閉じる