WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、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用のアイコンを単独で表示させてみました。

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント