【Cocoon】イメージ画像やアイコンを点滅させるカスタマイズ

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netでは、ソフトウェア(Windows)やハードウェア(自作PC)、WordPressテーマのカスタマイズなどパソコン関連の情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「イメージ画像やアイコンを点滅させる」カスタマイズについてまとめてみました。

WordPressテーマ Cocoonのイメージ画像やアイコン

WordPressテーマ Cocoonでのイメージ画像やアイコンについては、特に点滅させるギミックなどは用意されていません。

そこで、CSSの記述だけで「イメージ画像やアイコンを点滅させる」ためのカスタマイズを行いたいと思います。

イメージ画像やアイコンを点滅させるカスタマイズ

WordPressテーマ Cocoonでの「イメージ画像やアイコンを点滅させる」ためのカスタマイズを行います。

カスタマイズ内容

WordPressテーマ Cocoonでの「イメージ画像やアイコンを点滅させる」ためのカスタマイズの内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ
************************************/
.blink_before, /*HTMLのテキスト*/
.search-box .fa-search,/*サイドバーの検索ボックス内のサーチアイコン*/
#navi .fab.fa-twitter:before, /*ヘッダーメニューのTwitterアイコン*/
#navi .fab.fa-instagram:before, /*ヘッダーメニューのInstagramアイコン*/
#navi .fab.fa-youtube:before, /*ヘッダーメニューのYoutubeアイコン*/
#navi .fas.fa-camera-retro:before, /*ヘッダーメニューのレトロカメラアイコン*/
#navi .fas.fa-rss:before { /*ヘッダーメニューのRSSアイコン*/
  animation:blink 3.6s ease-in-out infinite alternate; /*点滅間隔3.6秒設定*/
}
.logo-header img { /*ヘッダーのサイトロゴ画像*/
  animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/
}
@keyframes blink{
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

カスタマイズ後のイメージ画像やアイコン

今回のカスタマイズによって、点滅させたイメージ画像やアイコンは次の様になりました。

なお、下記画像は静止画なので、実際の動きについてはこのMASAa.netでご確認下さい。

ヘッダーのサイトロゴ画像

【Cocoon】イメージ画像やアイコンを点滅させるカスタマイズ

ヘッダーのSNSアイコン(Twitterアイコン、Instagramアイコン、YouTubeアイコン、レトロカメラアイコン、RSSアイコン)

【Cocoon】イメージ画像やアイコンを点滅させるカスタマイズ

サイドバーの検索ボックス内のサーチアイコン

【Cocoon】イメージ画像やアイコンを点滅させるカスタマイズ

なお、ヘッダーメニューにアイコンのみを表示するカスタマイズについては、こちらのエントリー記事でご確認下さい。

【Cocoon】ヘッダーメニューにアイコンのみ表示するカスタマイズ
WordPressテーマ Cocoonの「ヘッダーメニューにアイコンのみ表示する」カスタマイズについてまとめてみました。今回のカスタマイズではヘッダーメニューにSNS用のアイコンを単独で表示させてみました。

最後に

この点滅させるギミックを導入したお陰で、サイト全体が穏やかに動いている感じになりました。

但し、あまり多く取り入れると逆に鬱陶しくなるので、全体のバランスを見てカスタマイズするかどうかを検討した方が良いでしょう。

コメント