【THE THOR】Prev/Nextアイキャッチ画像ラベルのカスタマイズ

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール） Prev/Nextアイキャッチ画像のラベル
Prev/Nextアイキャッチ画像ラベルのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のPrev/Nextアイキャッチ画像ラベル
最後に

WordPressテーマ THE THOR（ザ・トール）

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「Prev/Nextアイキャッチ画像ラベル」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール） Prev/Nextアイキャッチ画像のラベル

前回のエントリー記事で、「Prev/Nextアイキャッチ画像ホバー」のカスタマイズを行いました。

【THE THOR】Prev/Nextアイキャッチ画像ホバーのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）で「Prev/Nextアイキャッチ画像ホバー」のカスタマイズについてまとめてみました。ホバー時に日付＆タイトルとマスク系エフェクト利用時のマスク上テキストが重ならないようにしました。

そこで、気になったのがPrev/Nextアイキャッチ画像上に表示されている「Prev」と「Next」のラベルです。

この「Prev」と「Next」をもう少し分かりやすく表示するカスタマイズを行いたいと思います。

Prev/Nextアイキャッチ画像ラベルのカスタマイズ

「Prev/Nextアイキャッチ画像ラベル」のカスタマイズを行います。

カスタマイズ内容

「Prev/Nextアイキャッチ画像ラベル」のカスタマイズは、下記の通りです。

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

/************************************
** ■Prev/Next ラベルカスタマイズ
************************************/
.prevNext .prevNext__item.prevNext__item-prev .eyecatch .prevNext__pop::before { /*Prevに＞アイコン追加表示*/
	font-family: "Font Awesome 5 Free"; /*Font Awesome 5に設定*/
	content: "\f053\A0"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 16px;
	font-weight: 900;
}
.prevNext .prevNext__item.prevNext__item-next .eyecatch .prevNext__pop::after { /*Nextに＜アイコン追加表示*/
	font-family: "Font Awesome 5 Free"; /*Font Awesome 5に設定*/
	content: "\A0\f054"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 16px;
	font-weight: 900;
}