WordPressTHE THOR

【THE THOR】ホバー時のエントリー記事カードのアイキャッチ画像

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

今回は、WordPressテーマ THE THOR(ザ・トール)での「ホバー時のエントリー記事カードアイキャッチ画像スタイル変更」についてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)ホバー時のエントリー記事カードのアイキャッチ画像

これまでエントリー記事カードのアイキャッチ画像については色々とカスタマイズを行ってきました。

現在のエントリー記事カードのアイキャッチ画像については、次の様なスタイルとなっています。

【THE THOR】ホバー時のエントリー記事カードのアイキャッチ画像

また、ホバー時のエントリー記事カードのアイキャッチ画像については、次の様なスタイルとなっています。

【THE THOR】ホバー時のエントリー記事カードのアイキャッチ画像

今回は、エントリー記事カードのタイトルと続きを読むボタンのホバー時のスタイルに合わせて、エントリー記事カードのアイキャッチ画像変更を行ってみたいと思います。

ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更

「ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更」を行います。

変更内容

「ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更」内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回の変更内容を以前カスタマイズした部分を探し上書きします。

/************************************
** ■エントリー記事カードのアイキャッチのカスタマイズ
************************************/
.archive .archive__item .eyecatch {
	border-radius: 6px; /*角丸コーナー*/
	margin-top: 23px; /*アイキャッチ画像位置調整*/
	box-shadow: 6px 6px 3px rgba(0,0,0,0.4); /*シャドー(影)*/
	transition-duration: 0.6s; /*アニメーション*/
}
.archive .archive__item .eyecatch:hover {
	-webkit-transform: translateY(-6px); /*浮かす*/
	-ms-transform: translateY(-6px); /*浮かす*/
	transform: translateY(-6px); /*浮かす*/
	box-shadow: 0px 0px 8px 4px rgba(254,97,154,1);
	transition-duration: 0.6s; /*アニメーション*/
}
.archive .eyecatch__link img {
	transition-duration: 0.6s!important; /*アニメーション*/
}
.archive .eyecatch__link img:hover { /*ホバー時*/
	transition-duration: 0.6s; /*アニメーション*/
}

変更後のホバー時のエントリー記事カードのアイキャッチ画像スタイル変更

今回の変更によって、ホバー時のエントリー記事カードのアイキャッチ画像スタイルは次の様になりました。

【THE THOR】ホバー時のエントリー記事カードのアイキャッチ画像

なお、通常時のスタイルはカスタマイズ前のホバー時と同じシャドー(影)付きのスタイルにしましたが、シャドー(影)が必要無ければ下記の部分(7行目)を削除して下さい。

box-shadow: 6px 6px 3px rgba(0,0,0,0.4); /*シャドー(影)*/

【THE THOR】ホバー時のエントリー記事カードのアイキャッチ画像

今回のカスタマイズではホバー時に右側と下側に黒のシャドーを表示していたのを、タイトルと続きを読むボタンと同じスタイルの周囲をピンクのシャドーで囲むようにしました。

最後に

今回のカスタマイズによって、エントリー記事カード内のアイキャッチ画像、タイトル、続きを読むの全てのスタイルを共通化することができました。

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

コメント