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

コメント

1. 名前:さかたん :投稿日：2018/08/31(金) 19:06:34 ID：Q5OTk1Nzg

   おおもとさん

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

   返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/31(金) 19:51:08 ID：Y3NTg4Mzg

  今ちょうど、前回の表示に戻す記事を書いています。

  本日中の２１時ごろまでに仕上げますので、楽しみに待っていてください(｀･ω･´) キリリッ

  返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/31(金) 21:39:59 ID：Y3NTg4Mzg

  cssを調整中ですが、一応かけました。

  http://wvtravelclub.jp/button3/

  参考にしてください。

  返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/31(金) 22:17:53 ID：Y3NTg4Mzc

  cssを調整して完成しました！

  http://wvtravelclub.jp/button3/

  参考にしてください<(_ _)>

  返信
2. 名前:chan :投稿日：2018/08/31(金) 17:03:05 ID：Q5OTk1Nzg

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

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

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

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

   https://chan-bike.com/spoke

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

   返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/31(金) 19:52:39 ID：Y3NTg4Mzg

  あれ？
  ボクのブログはワンクリックで飛ぶんですけどね〜？？？？

  スキンの関係かもしれないですね
  ちょっと考えるので少々お待ちください<(_ _)>

  返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/09/02(日) 23:51:32 ID：kxMjA1MjQ

  遅くなりました。

  やっぱり検証した所、スキンの影響ではないかと思います。
  今回のCSSはかなり複雑なので簡単なCSSなら上手くいくと思います。

  この記事のCSSで上手くいくか試してみてください。

  http://wvtravelclub.jp/button/

  返信
3. 名前:さかたん :投稿日：2018/08/30(木) 21:00:46 ID：MyNzAwMjg

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

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

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

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

   返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/30(木) 23:29:25 ID：QwMzA1NzA

  お待たせいたしました。

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

  コード↓

  .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 ‘
  楽天マークはありません。

  返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/30(木) 23:32:55 ID：QwMzA1NzA

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

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

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

  返信
4. 名前:chan :投稿日：2018/08/30(木) 17:55:03 ID：MyNzAwMjg

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

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

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

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

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

   返信
• 名前:おおもと＠滋賀ブロガー :投稿日：2018/08/30(木) 18:58:15 ID：QwMzA1NzY

  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%;
}

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

  返信
• 名前:chan :投稿日：2018/08/31(金) 16:32:33 ID：Y3NTk3NDc

  出来ました!

  ありがとうございます。

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

  返信