【Cocoon】マウスオーバー時のカスタマイズ

i-cocoon

 リンクの上にマウスカーソルを乗っけた状態のことをマウスオーバーといいます。初期状態の「Cocoon」は、とっても淡い色使い。

 なもんで、少し色を付けて下品にしてやろうということで、マウスオーバー時のリアクションをCSSでカスタマイズしていこう、てな具合です。

方法

①ちと長いんですが、以下のコード内容をコピーします。 

.sns-share-buttons a:hover,
.cat-link:hover, .tag-link:hover,
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.tagcloud a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.pagination a:hover,
.pagination-next-link:hover,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.breadcrumb a:hover,
.bp-login-widget-register-link a:hover {
  opacity: 1;
  color: #000;
  background-color: #fb0;
  transition: 0s;
}

②「外観」→「テーマエディター」をクリック。

画面

③「子テーマ用のスタイルを書く、必要ならばここにコードを書く」の直下、赤枠の14行目に①でコピーしたコードを貼り付け。

④「ファイルを更新」ボタンをクリック。以上です。

CSSの説明

 CSSは、「変更したいもの」の「なに」を「どう変えるか」みたいな理解です。すません、ワシもあんま分かってないです。

こんな感じ
henkousitaimono {
    nani:  doukaeruka;
}

序盤大量のhover群

 「変更したいもの」に該当するセレクタと呼ばれる部分。1行目の「.sns-share-buttons a:hover」を例にとると、マウスオーバー時のSNSシェアボタンを変えたいですよ、みたいな。「,」で区切ることで、豪快にまとめて指定しております。

{ }

 「なに」を「どう変えるか」、それを、このかっこ内に記述します。

 

次は各項目について
  opacity: 1;
  color: #000;
  background-color: #fb0;
  transition: 0s;

opacity: 1;

 「透明度opacity」を「1にする」

 ※0.0(完全透明)~1.0(完全不透明)

color: #000;

 「文字の色color」を「黒#000にする」

 #から始まるカラーコードについてはこちらを是非。ワシは、めんどいから3桁ばっかりやぞ。

background-color: #fb0;

 「背景色background-color」を「オレンジ#fb0にする」

 かなり悪目立ちします。

transition: 0s;

 「変化trasition」を「0秒でやる」

 正直な話、ワシのボキャブラリーと頭脳では説明困難な代物で飛ばしたい項目。5秒とかにすると、ボワーとゆっくりと変化する、みたいな、やっぱイミフ。詳しい説明はこちらで。まぁ、0秒変化は草創期のウェブみたいでいいんじゃないでしょうか。

タイトルとURLをコピーしました