WordPressTHE THOR

【THE THOR】Prev/Nextスタイルのカスタマイズ

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

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

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。
MASAa.blog│パズドラ日記と製品レビューの記事を掲載するmasaaの元祖WordPressブログサイト
このMASAa.blogは、パズドラ好きmasaaのWordPressブログサイトです。パズル&ドラゴンズ(パズドラ)を始めスマホアプリについてやレビュー記事等を掲載していきます。

今回は、WordPressテーマ THE THOR(ザ・トール)での「Prev/Nextスタイル」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) Prev/Nextスタイル

これまでもWordPressテーマ THE THOR(ザ・トール)の「Prev/Nextスタイル」に関してのカスタマイズを行ってきました。

【THE THOR】Prev/Nextアイキャッチ画像をホバー時に浮かす
WordPressテーマ THE THOR(ザ・トール)での「Prev/Nextアイキャッチ画像をホバー時に浮かす」カスタマイズについてまとめてみました。今回【Prev/Nextアイキャッチ画像】に対しホバーした時に浮かす処理を加えました。
【THE THOR】Prev/Nextアイキャッチ画像ラベルのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)で「Prev/Nextアイキャッチ画像ラベル」のカスタマイズについてまとめてみました。今回、分かりやすいように矢印のアイコンをPrev/Nextのそれぞれに表示させてみました。
【THE THOR】Prev/Nextアイキャッチ画像 ホバーのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)で「Prev/Nextアイキャッチ画像 ホバー」のカスタマイズについてまとめてみました。ホバー時に日付&タイトルとマスク系エフェクト利用時のマスク上テキストが重ならないようにしました。
【THE THOR】Prev/Nextのアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「Prev/Nextのアイキャッチ画像」のホバーエフェクト無効にするカスタマイズについてまとめてみました。Prev/Nextのアイキャッチ画像にホバーしてもズームされなくしました。
【THE THOR】Prev/Nextのアイキャッチ画像のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「エントリー記事カードのアイキャッチ画像」「関連記事のアイキャッチ画像」のカスタマイズと同様に、「Prev/Nextのアイキャッチ画像」に対しても同様のカスタマイズを行ってみました。

現在のWordPressテーマ THE THOR(ザ・トール)での「Prev/Nextスタイル」のスタイルは、次の様になっています。

【THE THOR】Prev/Nextスタイルのカスタマイズ

また、Nextのアイキャチ画像にマウスカーソルをホバーしたときのスタイルは、次の様になっています。

【THE THOR】Prev/Nextスタイルのカスタマイズ

また、Prevのアイキャッチ画像にマウスカーソルをホバーしたときのスタイルは、次の様になっています。

【THE THOR】Prev/Nextスタイルのカスタマイズ

現在の「Prev/Nextスタイル」の場合、ホバーすると若干見難い状態となってしまっているので、見やすい「Prev/Nextスタイル」を目指してカスタマイズしたいと思います。

Prev/Nextスタイルのカスタマイズ

「Prev/Nextスタイル」のカスタマイズを行います。

カスタマイズ内容

「Prev/Nextスタイル」のカスタマイズは、下記の通りです。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「Prev/Next アイキャッチ画像カスタマイズ」「Prev/Next ラベルカスタマイズ」に上書きします。

以前「Prev/Nextのアイキャッチ画像」に関するカスタマイズを行っていない場合には、「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■Prev/Next アイキャッチ画像カスタマイズ
************************************/
.prevNext .eyecatch { /*アイキャッチ画像*/
	border-radius: 12px; /*角丸コーナー*/
	transition-duration: 0.6s; /*アニメーション*/
}
.prevNext .eyecatch .eyecatch__link img { /*アイキャッチ画像*/
	object-fit: none!important; /*置換コンテンツの拡大縮小解除*/
	transform: none!important; /*変形解除*/
}
.prevNext .eyecatch .eyecatch__link .heading-secondary { /*タイトル*/
	font-size: 16px; /*フォントサイズ*/
	color: #fff; /*文字色*/
}
.prevNext .eyecatch .icon-clock{ /*投稿年月日*/
	color: #fff; /*文字色*/
}
.prevNext .prevNext__title { /*タイトル*/
	bottom: 0; /*下からの配置距離を0固定*/
}
.prevNext .eyecatch .eyecatch__link:hover .icon-clock { /*ホバー時の投稿年月日*/
	opacity: 1.0; /*不透明度*/
	background-color: #111;
}
.prevNext .eyecatch .eyecatch__link .heading-secondary { /*タイトル*/
	transition-duration: 0.6s!important; /*アニメーション*/
}
.prevNext .eyecatch .eyecatch__link:hover .heading-secondary { /*ホバー時のタイトル*/
	transition-duration: 0.6s!important; /*アニメーション*/
	font-size: 12px!important; /*フォント縮小*/
	opacity: 1.0!important; /*不透明度*/
	background-color: #111;
}
.prevNext .eyecatch:hover { /*アイキャッチ画像*/
	transition-duration: 0.6s; /*アニメーション*/
	box-shadow: 6px 6px 6px rgba(0,0,0,0.4)!important; /*浮かした時のシャドー(影)*/
}

/************************************
** ■Prev/Next ラベルカスタマイズ
************************************/
.prevNext .prevNext__item.prevNext__item-prev .eyecatch .prevNext__pop,
.prevNext .prevNext__item.prevNext__item-next .eyecatch .prevNext__pop {
	border-radius: 18px; /*角丸コーナー*/
	margin: 5px;
	height: 24px;
	line-height: 22px;
}
@media only screen and (max-width: 1280px) { /*iPad縦横時の表示位置調整*/
	.prevNext .prevNext__item.prevNext__item-prev .eyecatch .prevNext__pop,
	.prevNext .prevNext__item.prevNext__item-next .eyecatch .prevNext__pop {
		line-height: 30px;
	}
}
.prevNext .prevNext__item.prevNext__item-prev .eyecatch .prevNext__pop {
	padding-left: 10px;
	padding-right: 22px;
}
.prevNext .prevNext__item.prevNext__item-next .eyecatch .prevNext__pop {
	padding-left: 22px;
	padding-right: 10px;
}
.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;
}

カスタマイズ後のPrev/Nextスタイル

今回のカスタマイズによって、「Prev/Nextスタイル」は次の様になりました。

【THE THOR】Prev/Nextスタイルのカスタマイズ

Nextのアイキャチ画像にマウスカーソルをホバーしたときのスタイルは、次の様になりました。

【THE THOR】Prev/Nextスタイルのカスタマイズ

Prevのアイキャッチ画像にマウスカーソルをホバーしたときのスタイルは、次の様になりました。

【THE THOR】Prev/Nextスタイルのカスタマイズ

今回のカスタマイズでは、

  • Prev/Nextのアイキャッチ画像のスタイル変更
  • Prev/Nextラベルのスタイル変更
  • フォント調整(カラー、サイズ)
  • ホバー時にフォントのバックカラーを設定

などについて行いました。

最後に

今回のカスタマイズを行う切っ掛けは、シンプルな「Prev/Nextスタイル」を実現したいと言うご相談を受けたのですが、その時忙しくなってしまい実施することができませんでした。

但し、からあげ棒さんのサイト「からあげ棒、ありったけ」で、シンプルな「Prev/Nextスタイル」を実現されています!

THE THOR ザ・トール 次の記事 / 前の記事 Prev/Nextの表示をシンプルにするカスタマイズ
もっともっとシンプルに!PrevNext をコンパクトに表示するカスタマイズ

と言うことで、少し落ち着いたので、自分の「Prev/Nextスタイル」を改善を行ってみたと言う訳です。

 

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

コメント