【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 │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト

PC･ガジェット･デジモノ･車好きのmasaaが情報を発信するサイト

今回は、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;
}