【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連THE THOR

【THE THOR】ページ送り戻りボタン(ページネーション)決定版

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

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

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)での「ページ送り戻りボタン(ページネーション)決定版」のカスタマイズ についてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)ページ送り戻りボタン(ページネーション)

前回「ページ送り戻りボタン(ページネーション)のスタイル」3回目のカスタマイズを行いました。

https://masaa.net/2022/08/09/thethor-220806-1/

それ以外にこれまで「ページ送り戻りボタン(ページネーション)」のスタイルに関するカスタマイズは、過去2回実施してきました。

【THE THOR】ページ送り戻りボタンのカスタマイズ2
WordPressテーマ THE THOR(ザ・トール)の「ページ送り戻りボタン」のカスタマイズ2についてまとめてみました。今回の「ページ送り戻りボタン」のカスタマイズでは、ページ送り戻りボタンのデザインを丸く変更してみました。
【THE THOR】ページ送り戻りボタンのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「ページ送り戻りボタン」のカスタマイズについてまとめてみました。今回の「ページ送り戻りボタン」のカスタマイズでは、これまでのカスタマイズの影響により見難くなっていたのを改善してみました。

また、「ページ送り戻りボタン(ページネーション)」の表示変更に関するカスタマイズは、過去2回実施しました。

【THE THOR】ページネーション(ページ送り)のカスタマイズ修正
WordPressテーマ THE THORの「ページネーション(ページ送り)」の修正カスタマイズを行いました。以前行った「ページネーション(ページ送り)」のカスタマイズについて、とある条件で表示がおかしくなる症状を確認し修正しました。
【THE THOR】ページネーション(ページ送り)のカスタマイズ
WordPressテーマ THE THORでの「ページネーション(ページ送り)」のカスタマイズについてまとめてみました。今回WordPressテーマCocoon同様、最終ページが表示されるページネーション(ページ送り)のスタイルにしました。

また、「ページ送り戻りボタン(ページネーション)」をトップページの一番上のエントリー記事カード上に表示するカスタマイズを実施しました。

【THE THOR】ページネーション(ページ送り)追加のカスタマイズ
WordPressテーマ THE THORでの「ページネーション(ページ送り)追加」のカスタマイズについてまとめてみました。今回のカスタマイズは一番上のエントリー記事カードの上側にもページネーション(ページ送り)を追加しました。

現在の「ページ送り戻りボタン(ページネーション)」のスタイルは、次の様になっています。

【THE THOR】ページ送り戻りボタン(ページネーション)決定版

【THE THOR】ページ送り戻りボタン(ページネーション)決定版

前回「ページ送り戻りボタン(ページネーション)のスタイル」のカスタマイズしていたときに、選択表示されたページのボタンとそれ以外のページのボタン、また、ページ数の桁数の違いによりボタンの円の形状が微妙に違ってきています。

と言うことで、使う上では特に問題ないのですが、気になったので「ページ送り戻りボタン(ページネーション)」の円の形状が綺麗に見えるように統一させたいと思います。

今回のエントリー記事では「ページ送り戻りボタン(ページネーション)決定版」としてカスタマイズについてまとめてみました。

ページ送り戻りボタン(ページネーション)決定版のカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「ページ送り戻りボタン(ページネーション)決定版」のカスタマイズを行います。

スタイルシート(style-user.css) カスタマイズ内容

「スタイルシート(style-user.css)」ファイルをエディタソフトで編集します。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容をこれまでカスタマイズした「■ページネーション(ページ送り戻りボタン)カスタマイズ」部分に上書きします。

これまで「カテゴリ最新記事」のカスタマイズを行っていない場合には追記する形でOKです。

/************************************
** ■ページネーション(ページ送り戻りボタン)カスタマイズ
************************************/
.pager {
	margin-bottom: 50px;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.pager {
		transform: scale(1.0, 0.9);
	}
}
.pager .pager__item a { /*ページ送り戻りボタン*/
	font-size: 14px; /*フォントサイズ*/
	font-weight: 900; /*フォント強調*/
	font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif; /*フォント設定*/
	padding: 0;
	transition-duration: 0.4s; /*アニメーション*/
}
.pager .pager__item a:hover { /*ページ送り戻りボタンホバー時*/
	color: #ffffff; /*文字色*/
	text-decoration:none; /*装飾無し*/
	font-weight: 900; /*フォント強調*/
	transition-duration: 0.4s; /*アニメーション*/
}
.pager .pager__item {
	border:2px solid #ff75a7; /*枠線設定 #ffc5e0*/
	margin: 4px 4px; /*外側左右余白設定*/
	box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
	position: relative;
	top: 0px; /*円の位置調整*/
	padding: 10px 0 0 0!important; /*数値の上間隔*/
	border-radius: 20px; /*角丸コーナー*/
	width: 38px; /*円横サイズ*/
	height: 38px; /*円縦サイズ*/
	transition-duration: 0.4s; /*アニメーション*/
}
.pager .pager__item:hover {
	transition-duration: 0.4s; /*アニメーション*/
}
.pager .pager__item.pager__item-current { /*現選択ページ*/
	position: relative;
	top: 0; /*円の位置調整*/
	border: none; /*枠線無*/
	padding: 12px 0 0 0!important; /*数値の上間隔*/
	border-radius: 20px; /*角丸コーナー*/
	width: 38px; /*円横サイズ*/
	height: 38px; /*円縦サイズ*/
	font-size: 14px; /*フォントサイズ*/
	font-weight: 900; /*フォント強調*/
	font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif; /*フォント設定*/
}
.pager .pager__item.pager__item-prev {
	padding-left: 15px;
	padding-right: 4px;
}
.pager .pager__item.pager__item-next {
	padding-left: 4px;
	padding-right: 15px;
}
.pager .pager__item a { /*丸枠全体にホバー領域広げる*/
	position: static;
	transform: none;
}
.pager .pager__item a::after { /*丸枠全体にホバー領域広げる*/
	content: "";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
	pointer-events:auto;
	background-color: transparent;
	cursor:pointer;
}

カスタマイズ後のページ送り戻りボタン(ページネーション)

今回のカスタマイズによって、「ページ送り戻りボタン(ページネーション)」のスタイルは、次の様になりました。

【THE THOR】ページ送り戻りボタン(ページネーション)決定版

【THE THOR】ページ送り戻りボタン(ページネーション)決定版

「ページ送り戻りボタン(ページネーション)」の円の形状が全て綺麗に統一されました。

「ページ送り戻りボタン(ページネーション)」の実際の動作については、MASAa.blog または、ZMASAa.blog で確認して下さい。

なお、これまでの「ページ送り戻りボタン(ページネーション)」のカスタマイズを行わずに、今回の「ページ送り戻りボタン(ページネーション)決定版」だけ行うと【Prev】と【<】、【Next】と【>】がそれぞれ重なって表示されてしまうので、その場合は、「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を追記して下さい。

これにより【<】【>】が削除され、【Prev】【Next】のみの表示される形となります。

.pager__item.pager__item-prev::before,
.pager__item.pager__item-next::before  {
	display: none;
}

最後に

「ページ送り戻りボタン(ページネーション)を綺麗に円の形状を整えるだけの簡単なカスタマイズと思っていたのですが、かなり手こずってしまいボリュームの大きい複雑なカスタマイズとなってしまいました。

これ以上良くできる自信も無いので、これで「ページ送り戻りボタン(ページネーション)」に関しては「決定版」として不具合が発生しない限りこの状態で使っていきます。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
アルケミストガーデン
最強でんでん
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
黒い砂漠 MOBILE
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

オンラインくじ引き
オンラインくじ引き INAKUJI(いなくじ)INABA.TECH
MASAa.net

コメント