WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ページ送り戻りボタン（ページネーション）決定版」のカスタマイズ についてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）ページ送り戻りボタン（ページネーション）
前回「ページ送り戻りボタン（ページネーション）のスタイル」3回目のカスタマイズを行いました。
それ以外にこれまで「ページ送り戻りボタン（ページネーション）」のスタイルに関するカスタマイズは、過去2回実施してきました。
また、「ページ送り戻りボタン（ページネーション）」の表示変更に関するカスタマイズは、過去2回実施しました。
また、「ページ送り戻りボタン（ページネーション）」をトップページの一番上のエントリー記事カード上に表示するカスタマイズを実施しました。
現在の「ページ送り戻りボタン（ページネーション）」のスタイルは、次の様になっています。
前回「ページ送り戻りボタン（ページネーション）のスタイル」のカスタマイズしていたときに、選択表示されたページのボタンとそれ以外のページのボタン、また、ページ数の桁数の違いによりボタンの円の形状が微妙に違ってきています。
と言うことで、使う上では特に問題ないのですが、気になったので「ページ送り戻りボタン（ページネーション）」の円の形状が綺麗に見えるように統一させたいと思います。
今回のエントリー記事では「ページ送り戻りボタン（ページネーション）決定版」としてカスタマイズについてまとめてみました。
ページ送り戻りボタン（ページネーション）決定版のカスタマイズ
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;
}
カスタマイズ後のページ送り戻りボタン（ページネーション）
今回のカスタマイズによって、「ページ送り戻りボタン（ページネーション）」のスタイルは、次の様になりました。
「ページ送り戻りボタン（ページネーション）」の円の形状が全て綺麗に統一されました。
「ページ送り戻りボタン（ページネーション）」の実際の動作については、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;
}
最後に
「ページ送り戻りボタン（ページネーション）を綺麗に円の形状を整えるだけの簡単なカスタマイズと思っていたのですが、かなり手こずってしまいボリュームの大きい複雑なカスタマイズとなってしまいました。
これ以上良くできる自信も無いので、これで「ページ送り戻りボタン（ページネーション）」に関しては「決定版」として不具合が発生しない限りこの状態で使っていきます。
コメント