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,
		],
	];

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

  • ゲーミングマウス
  • ゲーミングキーボード
  • PCゲーム
  • 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. PCゲーム
  3. ゲーミングマウスパッド
  4. ゲーミングマウス
  5. ゲーミングマウス
  6. ゲーミングキーボード
  7. ゲームパッド
  8. ゲーミングマウス
  9. ゲーミングキーボード
  10. ゲーミングマウス
  11. コントローラー(ハンドル・ジョイスティック)
  12. ゲーミングマウスパッド
  13. PCゲーム
  14. ゲーミングマウス
  15. ゲーミングマウス
  16. ゲーミングマウス
  17. PCゲーム
  18. 周辺機器・アクセサリ
  19. ゲーミングマウス
  20. コントローラー(ハンドル・ジョイスティック)
  1. ゲームソフト
  2. ゲームソフト
  3. ゲーム機本体
  4. ゲームソフト
    発売日 : 2019年10月18日
    価格 : ¥7,473
    新品最安値 :
    ¥7,470
  5. ゲーム機本体
  6. ゲームソフト
    発売日 : 2021年10月29日
    価格 : ¥5,409
    新品最安値 :
    ¥5,000
  7. コントローラー
  8. ゲームソフト
  9. ゲームソフト
    発売日 : 2017年04月28日
    価格 : ¥5,318
    新品最安値 :
    ¥4,900
  10. ゲームソフト
  11. ゲームソフト
    発売日 : 2022年03月25日
    価格 : ¥5,664
    新品最安値 :
    ¥5,664
  12. ゲームソフト
    発売日 : 2020年03月20日
    価格 : ¥5,628
    新品最安値 :
    ¥4,500
  13. ゲームソフト
  14. ゲームソフト
  15. ゲームソフト
    発売日 : 2020年11月19日
    価格 : ¥5,120
    新品最安値 :
    ¥4,430
  16. ゲームソフト
    発売日 : 2018年06月21日
    価格 : ¥3,490
    新品最安値 :
    ¥3,280
  17. ゲームソフト
  18. Nintendo Switch
  19. ゲームソフト
  20. ゲームソフト
  1. コミック
  2. コミック
  3. コミック
  4. コミック
  5. コミック
  6. コミック
  7. コミック
  8. コミック
  9. コミック
  10. コミック
  11. コミック
  12. コミック
  13. コミック
  14. コミック
  15. コミック
  16. コミック
  17. コミック
  18. コミック・ラノベ・BL
    発売日 : 2022年01月15日
    価格 : ¥673
    新品最安値 :
    ¥673
  19. コミック
  20. コミック
よかったらシェアしてね!
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で不定期にインしてのんびりギャザクラやってる感じの人です。課金はお布施みたいにずっと切らしていないんですがイン出来ない事が多いので宝くじ当てて廃プレイしたいなあって思ってます。

コメント

コメントする

トップへ
目次
閉じる