【Amazon】7/12 (火) ~ 7/13 (水) プライムデー 

RinkerのボタンにリップルエフェクトをCSSのみでカスタマイズする方法

URLをコピーする
URLをコピーしました!
Rinker カスタマイズ リップルエフェクト

Rinkerのボタンにマテリアルデザインのリップルエフェクトのようなアニメーションを付けてみました。
CSSのみでカスタマイズしています。

こんな感じになります。

rinker ripple css
目次

リップルエフェクトとは?

マテリアルデザインのアニメーションの1つで、波紋が広がるようなエフェクトです。
今回はクリック時やホバー時に限定せず、常時アニメーションさせるやり方を使いました。
クリックした所を起点にエフェクトを出す場合は、cssだけじゃなくてjsも使うんじゃないかなぁと思います。

リップルエフェクトの実装に際してはこちらを参考にさせていただきました。

Rinkerのボタンのエフェクトのカスタマイズ

お伝えしたいことを先に挙げます。

  • 詳しくない上で強引に実装させているので、スマートではないです。
    もし試される場合は、バックアップを取られる事をオススメします。
  • お使いのWordpressテーマによって結果が異なる場合が有ったり、
    既にカスタマイズしている場合には整合性などもご留意ください。

既に分かっていることは次の3点です。
・微妙に下側がエフェクトが掛かっていません。
・スマホから見た場合に微妙に右に寄っています。
・ボタン名が長い場合にサイドバーに設置した際などでは表示が崩れます。
※ white-space: nowrap;で固定してボタン名を短くして対処しています。

コードはよく分からないので、どなたかが改良してぜひ教えて頂ければ大変うれしく思います!
※ こんな感じで変えたいという叩き台を出して、叶えば良いなぁが目的です。

カスタマイズ内容はこちらです。
外観→カスタマイズ→追加CSSに追記するだけです。

/*Rinker Ripple Effect*/
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    text-decoration: none !important;
    text-align: center;
    white-space: nowrap;
    line-height: 0.2;
    color: #fff !important;
    display: inline-block;
    margin: 0;
    padding: 1.6em;
    position: relative;
    overflow: hidden;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a::before {
    display: inline-block;
    position: absolute;
    z-index: 1;
    top: 300%;
    left: 50%;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: left top;
    border-radius: 50%;
    content: '';
    width: 10em;
    height: 10em;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
    from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
    15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

div.yyi-rinker-contents ul.yyi-rinker-links li a::after { content: ''; clear: left; }

Rinkerのボタンの表示名のカスタマイズ

ボタンの表示名はショートコードで変える方法も有ると思いますが、僕の場合はプラグインエディターからRinkerのyyi_rinker_abstract.phpを選択して700行付近を下記のように変更しました。

‘label’の「Yahooショッピング」の部分のみを短く変えました。
		self::SHOP_TYPE_AMAZON => [
			'column'	=> 'amazon_url',
			'label'		=> 'Amazon',
			'column'	=> self::MOSHIMO_AMAZON_ID_COLUMN,
			'val'		=> self::MOSHIMO_SHOP_AMAZON_VAL,
		],
		self::SHOP_TYPE_RAKUTEN => [
			'column'	=> 'rakuten_url',
			'label'		=> '楽天市場',
			'column'	=> self::MOSHIMO_RAKUTEN_ID_COLUMN,
			'val'		=> self::MOSHIMO_SHOP_RAKUTEN_VAL,
		],
		self::SHOP_TYPE_YAHOO => [
			'column'	=> 'yahop_url',
			'label'		=> 'Yahooショッピング',
			'column'	=> self::MOSHIMO_YAHOO_ID_COLUMN,
			'val'		=> self::MOSHIMO_SHOP_YAHOO_VAL,
		],
	];
こんな感じです。一部のid部分は記述していないので実際はもっと長いです。
		self::SHOP_TYPE_AMAZON => [
			'column'	=> 'amazon_url',
			'label'		=> 'Amazon',
			'column'	=> self::MOSHIMO_AMAZON_ID_COLUMN,
			'val'		=> self::MOSHIMO_SHOP_AMAZON_VAL,
		],
		self::SHOP_TYPE_RAKUTEN => [
			'column'	=> 'rakuten_url',
			'label'		=> '楽天市場',
			'column'	=> self::MOSHIMO_RAKUTEN_ID_COLUMN,
			'val'		=> self::MOSHIMO_SHOP_RAKUTEN_VAL,
		],
		self::SHOP_TYPE_YAHOO => [
			'column'	=> 'yahop_url',
			'label'		=> 'Yahoo!',
			'column'	=> self::MOSHIMO_YAHOO_ID_COLUMN,
			'val'		=> self::MOSHIMO_SHOP_YAHOO_VAL,
		],
	];

以上です、お疲れさまでした!

  • PS4
  • マウス
  • キーボード
  • Switch
  • マンガ
  1. ゲームソフト
  2. ゲームソフト
  3. ヘッドセット
  4. ヘッドセット
  5. ゲームソフト
  6. ゲームソフト
  7. ゲームソフト
  8. コントローラー(ハンドル・ジョイスティック)
  9. コントローラー(ハンドル・ジョイスティック)
  10. アクセサリーキット
  11. ヘッドセット
  12. ゲームソフト
  13. ゲームソフト
  14. ヘッドセット
  15. コントローラー(ハンドル・ジョイスティック)
  16. ゲームソフト
  17. ヘッドセット
  18. コントローラー(ハンドル・ジョイスティック)
  19. ヘッドセット
  20. コントローラー(ハンドル・ジョイスティック)
  1. ゲーミングマウスパッド
  2. ゲーミングマウス
  3. ゲーミングマウス
  4. ゲーミングマウス
  5. ゲーミングマウス
  6. ゲーミングマウス
  7. ゲーミングマウス
  8. ゲーミングマウス
  9. ゲーミングマウス
  10. ゲーミングマウス
  11. ゲーミングキーボード
  12. ゲーミングマウス
  13. ゲーミングマウス
  14. ゲーミングマウス
  15. ゲーミングマウス
  16. ゲーミングキーボード
  17. ゲーミングマウス
  18. ゲーミングマウス
  19. ゲーミングマウス
  20. ゲーミングマウス
  1. ゲーミングキーボード
  2. ゲーミングキーボード
  3. ゲーミングキーボード
  4. ゲーミングキーボード
  5. ゲーミングキーボード
  6. ゲーミングキーボード
  7. ゲーミングキーボード
  8. ゲーミングキーボード
  9. ゲーミングキーボード
  10. ゲーミングキーボード
  11. ゲーミングキーボード
  12. ゲーミングキーボード
  13. ゲーミングキーボード
  14. ゲーミングキーボード
  15. ゲーミングキーボード
  16. ゲーミングキーボード
  17. ゲーミングキーボード
  18. ゲーミングキーボード
  19. ゲーミングキーボード
  20. ゲーミングキーボード
  1. ゲームソフト
  2. ゲームソフト
  3. ゲームソフト
  4. ゲームソフト
  5. ゲーム機本体
  6. ゲームソフト
  7. ゲームソフト
    発売日 : 2019年10月18日
    価格 : ¥7,473
    新品最安値 :
    ¥12,960
  8. ゲームソフト
  9. ゲームソフト
  10. ゲームソフト
  11. ゲームソフト
    発売日 : 2022年09月09日
    価格 : ¥5,673
    新品最安値 :
    ¥5,673
  12. ゲームソフト
  13. ゲームソフト
    発売日 : 2017年04月28日
    価格 : ¥5,545
    新品最安値 :
    ¥4,700
  14. ゲームソフト
    発売日 : 2022年03月25日
    価格 : ¥5,618
    新品最安値 :
    ¥4,800
  15. ゲームソフト
  16. ゲームソフト
    発売日 : 2022年06月09日
    価格 : ¥5,100
    新品最安値 :
    ¥5,100
  17. ゲーム機本体
  18. ゲームソフト
    発売日 : 2018年06月21日
    価格 : ¥3,300
    新品最安値 :
    ¥2,984
  19. ゲームソフト
  20. ゲームソフト
    発売日 : 2022年04月29日
    価格 : ¥3,825
    新品最安値 :
    ¥3,825
  1. コミック・ラノベ・BL
    発売日 : 2022年06月21日
    価格 : ¥119
    新品最安値 :
    ¥119
  2. コミック
  3. コミック
  4. コミック
  5. コミック
  6. コミック
  7. コミック
  8. コミック
  9. コミック
  10. コミック
  11. コミック
  12. コミック
  13. コミック
  14. コミック
  15. コミック
  16. コミック
  17. コミック・ラノベ・BL
    発売日 : 2022年05月14日
    価格 : ¥99
    新品最安値 :
    ¥99
  18. コミック
  19. コミック
  20. コミック
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

スポンサードリンク

この記事を書いた人

小学生の時にPCを買って頂いてからのPCゲーマーです。
元々はFPS民でCS:S、SF1、AVA、CS:GO、PUBG、APEXを触りました。いくつかのタイトルで大会も出たんですがさくっと負けたのが良い思い出です。

FPS以外は罪と罰++ 二律背反、アスガルド、LuviniaSaga、TERA、マビノギ英雄伝、FF14、Blade&Soul、TreeofSavior、PSO2、Satisfactory、Kurtzpel、ShadowArena、FallGuys、Craftopiaなどを触ってた雑食です。FF14を長くやっていて邂逅編の頃にガチ廃人でした。

最近はFF14で不定期にインしてのんびりギャザクラやってる感じの人です。課金はお布施みたいにずっと切らしていないんですがイン出来ない事が多いので宝くじ当てて廃プレイしたいなあって思ってます。

コメント

コメントする

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

トップへ
目次
閉じる