コクーン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%;
}

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

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

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

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

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

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

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメント一覧 (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%;
      }

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

はた へ返信する コメントをキャンセル

CAPTCHA

もくじ
閉じる