AFFINGER

【AFFINGER】カスタムボタンをマウスオーバーで色を反転させる方法

広告:ページ内にてアフィリエイト広告を利用しています。


AFFINGER の「STINGER:カスタムボタン」は便利ですね。しかし、マウスオーバーでも強調されないので若干気が付きにくい。

ポイント

本記事では、

カスタムボタンをマウスオーバーで

色を反転させる方法を解説します。

CSS を使って実現します。

おすすめ副業

\AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください/

PR

AFFINGER の「カスタムボタン」の色反転のサンプル

AFFINGER のカスタムボタンでマウスオーバーで色を反転するサンプルです。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

パソコンで表示した場合、マウスオーバーで色を反転させています。スマホの場合はタップで他URLに移動してしまうので、ちょっとわかりにくいですね。

「カスタムボタン」の色反転を作る方法

実際に作る方法です。CSS を使って実現します。

step
1
カスタムボタンを作る

AFFINGER の部品「STINGER:カスタムボタン」を使ってボタンを作ります。

カスタムボタンを作る
  • 「太字」のチェックを外す
  • 「太さ」に 1 を指定する
  • 「文字色」に 赤色( #E92F3D )を指定する
  • 「背景色」に 白色( #FFFFFF )を指定する
  • 「ボーダー」に 赤色( #E92F3D )を指定する
  • 「ボタンシャドウ」に 赤色( #E92F3D )を指定する

色を反転させたときに全体に色が付いて見栄えをよくするために、もともとのボタンの色は枠線+文字色で背景白のボタンに設定しています。

step
2
CSS を設定する

ボタンに「クラス名」を付与する。

クラス名を付ける
  • 「追加CSSクラス」に任意のクラス名(例:my-custom-button-red)を指定する

step
2
CSS を設定する

CSS を設定して色の反転を実現します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

CSS を設定する
  • CSS を設定する

設定する CSS は以下です。

.my-custom-button-red:hover {
    background:#E92F3D !important;
}

.my-custom-button-red a{
    transition: 0s !important;
}

.my-custom-button-red:hover a{
    color : #ffffff !important;
    opacity : 1.0 !important;
}

ポイントを説明します。

  • 「hover」で背景色を赤色( #E92F3D )に設定します(※)
  • カスタムボタンはマウスホバーで若干「ぼわっと」する演出があります。「transition: 0s !important;」で演出を止めます
  • 「color : #ffffff !important;」でマウスオーバー時の文字色を白にします
  • カスタムボタンはマウスホバーで文字色を若干ぼ足していますので、「 opacity : 1.0 !important;」でボカシを止めます

※青色のボタンの場合は背景色を「 #0693E3 」に設定します。

完成です。

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

まとめ:カスタムボタンをマウスオーバーで色を反転させる方法

AFFINGER のカスタムボタンでマウスオーバーで色を反転する場合は、CSS で設定します。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

かっこいい記事デザインでサイトを作ってくださいね。

おしゃれサイト
ノートパソコン

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!

PR
―― 今日のおみくじ ――

第 7 番

大吉


今日のメッセージ

ラッキーセブンで今日は勝負をかけていこう!勝っても負けても楽しんで!
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記