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

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoonのイメージ画像やアイコン
イメージ画像やアイコンを点滅させるカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のイメージ画像やアイコン
最後に

WordPressテーマ Cocoon

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

MASAa.net | 製品レビューと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;
  }
}