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

【THE THOR】エントリー記事カードのカスタマイズ3回目

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

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

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)での3回目となる「エントリー記事カード」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) エントリー記事カード

以前にもWordPressテーマ THE THOR(ザ・トール)の「エントリー記事カード」についてはカスタマイズを行ってきました。

【THE THOR】エントリー記事カードのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「エントリー記事カード」のカスタマイズについてまとめてみました。今回のカスタマイズではタイトルに背景を設定して、その他にアイキャッチ画像の位置調整などを行ってみました。
【THE THOR】エントリー記事カードのタイトルのカスタマイズ
WordPressテーマ THE THORのアーカイブページのレイアウト設定を「ワイドレイアウト」から「ノーマルレイアウト」に変更しました。ノーマルレイアウト変更に伴いエントリー記事カードのタイトルのカスタマイズを行いました。

現在の「エントリー記事カード」のスタイルは下記の通りとなっています。

【THE THOR】エントリー記事カードのカスタマイズ3回目

前回「見出し1(h1タグ)」と「見出し2(h2タグ)」についてスタイルを変更しました。

【THE THOR】見出し(h1〜h5タグ)のカスタマイズ3回目
WordPressテーマ THE THOR(ザ・トール)での3回目となる「見出し(h1~h5タグ)」のカスタマイズについてまとめてみました。今回「見出し1(h1タグ)」と「見出し2(h2タグ)」のスタイルを変更して差別化しました。

今回「エントリー記事カード」のタイトルを「見出し1(h1タグ)」と「見出し2(h2タグ)」と同じスタイルに変更するカスタマイズを行いたいと思います。

エントリー記事カードのカスタマイズ3回目

WordPressテーマ THE THOR(ザ・トール)での3回目となる「エントリー記事カード」のカスタマイズを行います。

カスタマイズ内容

3回目の「エントリー記事カード」カスタマイズの内容は下記の通りです。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「エントリー記事カードのタイトルのカスタマイズ」と「エントリー記事カードホバー時のタイトルのカスタマイズ」に上書きします。

/************************************
** ■エントリー記事カードのタイトルのカスタマイズ
************************************/
.archive h2 a {
	display: block;
	position: relative;
	word-break: break-all; /*表示範囲に合わせて改行*/
	background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
	background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
	color:#333; /*文字色*/
	font-size:18px; /*フォントサイズ*/
	letter-spacing:1px; /*文字間隔*/
	text-decoration:none; /*装飾無し*/
	font-weight:bold; /*フォント太さ*/
	padding: 14px 4px 14px 24px; /*内側余白設定*/
	line-height:150%; /*行の高さ*/
	border-radius: 6px; /*角丸コーナー*/
	border: 2px solid #fe619a; /*枠線*/
	transition-duration: 0.6s; /*アニメーション*/
}
.archive h2 a::after {
	position: absolute;
	top: 0.4em;
	left: 0.5em;
	content: '';
	width: 8px;
	height: -webkit-calc(100% - 0.8em);
	height: calc(100% - 0.8em);
	background-color: #fe619a;
	border-radius: 4px;
}

/************************************
** ■エントリー記事カードホバー時のタイトルのカスタマイズ 
************************************/
.archive .heading.heading-secondary a:hover{
	text-decoration: none;
	color:#000;
}

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

/************************************
** ■イメージ画像やアイコンを点滅させるカスタマイズ
************************************/
.archive h2 a::after { /*エントリー記事カードのタイトル*/
	animation:blink 1.8s ease-in-out infinite alternate!important; /*アニメーション点滅間隔1.8秒設定*/
}
@keyframes blink {
	0% {
		opacity: 0.2;
	}
	81% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
.archive .archive__contents:hover h2 a::after { /*エントリー記事カードのタイトル ホバー時*/
	animation:blink 0.4s ease-in-out infinite alternate!important; /*アニメーション点滅間隔0.4秒設定*/
	background-color: #ff005d; /*カラー設定*/
}

カスタマイズ後のエントリー記事カード

今回のカスタマイズによって、「エントリー記事カード」のスタイルは次の様になりました。

【THE THOR】エントリー記事カードのカスタマイズ3回目

「エントリー記事カード」のタイトルを「見出し1(h1タグ)」と「見出し2(h2タグ)」と同様のサイズの変更と左側に縦バーを設置し点滅するスタイルにしました。

【THE THOR】エントリー記事カードのカスタマイズ3回目

また、ホバー時には、縦バーの色を変え点滅間隔を早めています。

【THE THOR】エントリー記事カードのカスタマイズ3回目

最後に

「エントリー記事カード」のタイトルの一部を点滅させることによって、少しでもクリック率が上がれば良いかなと思います。

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

コメント