【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群

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

{　}

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

 

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

opacity: 1;

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

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

color: #000;

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

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

background-color: #fb0;

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

　かなり悪目立ちします。

transition: 0s;

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

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

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