【THE THOR】ページ送り戻りボタンのカスタマイズ

WordPressテーマ THE THOR

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

ZMASAa.blog │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト

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

wp.masaa.net

WordPressテーマ THE THOR（ザ・トール）の「ページ送り戻りボタン」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR ページ送り戻りボタン

WordPressテーマ THE THOR（ザ・トール）の「ページ送り戻りボタン」の表示は次の様になっています。

特に問題の無い「ページ送り戻りボタン」です。

しかし、「ページ送り戻りボタン」をホバー（この場合3）すると、これまでのカスタマイズの影響により若干見難くなってしまっています。

と言う事で、この点について改善するカスタマイズを行ってみました。

ページ送り戻りボタンのカスタマイズ

「ページ送り戻りボタン」のカスタマイズを行います。

カスタマイズ内容

「ページ送り戻りボタン」のカスタマイズは、下記の通りです。

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

/************************************
** ■ページ送り戻りボタンカスタマイズ
************************************/
.pager__item-current,
.pager__item a:hover{ /*ページ送り戻りボタンホバー時*/
	color: #ffffff; /*文字色*/
	text-decoration:none; /*装飾無し*/
}

カスタマイズ後のページ送り戻りボタン

今回の「ページ送り戻りボタン」のカスタマイズによって、ホバー時の「ページ送り戻りボタン」の表示（この場合3）は次の様になりました。

今回の「ページ送り戻りボタン」のカスタマイズで、

• ホバー時の文字色を白色に設定
• ホバー時の装飾無しに設定

の2点について修正を行いました。

最後に

「ページ送り戻りボタン」を大きくデザイン変更をしても良かったのですが、今回は「ページ送り戻りボタン」のホバー時だけの小変更に留めました。

また気が向いたら「ページ送り戻りボタン」のデザインをカスタマイズしたいと思います。