【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressSimplicity

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

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

WordPressテーマ Simplicity 2

別ブログのMASAa.blogは、WordPressテーマ Simplicity 2を使って構築しています。

MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)
パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)

このMASAa.blogは、自分がWordPressウェブサイトとして初めて作ったもので現在も好評運営中です。

MASAa.blogで使っているWordPressテーマ Simplicity 2は、既に後継テーマとしてWordPressテーマ Cocoonがリリースされているので、メンテナンス程度のバージョンアップしかなく今後需要は少ないものと思われます。

今回、ZMASAa.blogやMASAa.netで起用した「イメージ画像やアイコンを点滅させる」カスタマイズが気に入ってしまったので、珍しくMASAa.blogにも導入してみました。

前回のエントリー記事では「【Simplicity】タイトルやボタンをキラッと光らせるカスタマイズ」を行いました。

【Simplicity】タイトルやボタンをキラッと光らせるカスタマイズ
WordPressテーマ Simplicity 2での「タイトルやボタンをキラッと光らせる」カスタマイズについてまとめてみました。今回、エントリーカードのアイキャッチ画像とタイトル、SNSシェアボタンに採用してみました。

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

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

WordPressテーマ CocoonやTHE THOR(ザ・トール)同様、WordPressテーマ Simplicity 2にもイメージ画像やアイコンについては、特に点滅させるギミックなどは用意されていません。

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

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

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

カスタマイズ内容

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

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

/************************************
** ■イメージ画像やアイコンを点滅させるカスタマイズ
************************************/
#searchsubmit, /*サイドバーの検索ボックス内のサーチアイコン*/
.entry-read { /*続きを読むボタン*/
  animation:blink 3.6s ease-in-out infinite alternate; /*アニメーション点滅間隔3.6秒設定*/
}
#header .icon-twitter-logo, /*ヘッダーTwitterフォローアイコン*/
#header .icon-instagram-logo, /*ヘッダーInstagramフォローアイコン*/
#header .icon-feedly-logo, /*ヘッダーfeedlyフォローアイコン*/
#header .icon-rss-logo, /*ヘッダーRSSアイコン*/
#site-title a { /*ヘッダーサイトロゴ*/
  animation:blink 1.8s ease-in-out infinite alternate; /*アニメーション点滅間隔1.8秒設定*/
}
@keyframes blink{
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

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

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

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

ヘッダーのサイトロゴ画像と右上のSNSフォローアイコン

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

続きを読むボタン

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

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

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

最後に

WordPressテーマ Simplicity 2はWordPressテーマとしては古いタイプになりますが、WordPressテーマ CocoonやTHE THOR(ザ・トール)と比較しても十分に見栄えの良いウェブサイトになったと思います。

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

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

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



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

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

MASAa.net

コメント