【THE THOR】ウィジェット [THE]人気記事のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）

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

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

wp.masaa.net

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

wp.masaa.me

今回は、WordPressテーマ THE THOR（ザ・トール）の「ウィジェット [THE]人気記事」のカスタマイズ についてまとめてみました。

人気記事コンテンツ

人気記事コンテンツは、「ウィジェット 人気の投稿とページ(Jetpack)」をサイドバーエリアで使用していました。

今回、人気記事コンテンツをメインエリアで表示させてみました。

人気記事コンテンツをメインエリアで表示するにあたって、WordPressテーマ THE THOR（ザ・トール）標準の「ウィジェット [THE]人気記事」を使用することにしました。

「ウィジェット [THE]人気記事」をメインエリアに表示したスタイルは、次の様になっています。

このままでは必要以上に場所を取ってしまうので、コンパクトでサイトデザインにあった「ウィジェット [THE]人気記事」にするためのカスタマイズについてまとめてみました。

ウィジェット [THE]人気記事のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「ウィジェット [THE]人気記事」のカスタマイズを行います。

カスタマイズ内容

「ウィジェット [THE]人気記事」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を追記する形でOKです。

/************************************
** ■ウィジェット[THE]人気記事をメインカラムに表示するカスタマイズ
************************************/
.widget_fit_ranking_archive_class {
	padding: 0;
	margin-top: 40px;
	box-shadow: none!important;
}
.widget_fit_ranking_archive_class .eyecatch {
	margin-bottom: 2px;
}
.widget_fit_ranking_archive_class .widgetArchive.widgetArchive-rank {
	margin-top: 20px; /*上マージン*/
	display: flex; /*子要素横並びレイアウト指定*/
	flex-wrap: wrap; /* 折返し指定 */
	justify-content: center; /*中央寄せ*/
	flex-wrap: wrap;
}
.widget_fit_ranking_archive_class .widgetArchive__item {
	padding-bottom: 10px;
}
.widget_fit_ranking_archive_class .heading.heading-tertiary {
	margin-bottom: 10px;
}
.widget_fit_ranking_archive_class .widgetArchive.widgetArchive-rank div {
	max-width: 228px; /*各自のサイトに合わせて要調整*/
	border-radius: 6px; /*角丸コーナー*/
}
.widget_fit_ranking_archive_class .widgetArchive__item.widgetArchive__item-rank {
	margin:0 4px 0 4px;
}
.widget_fit_ranking_archive_class .dateList__item.icon-clock {
	font-size: 9px;
	float:right; /*右寄せ*/
}
.widget_fit_ranking_archive_class .heading.heading-tertiary a {
	word-break: break-all; /*表示範囲に合わせて改行*/
	font-size: 14px!important;
}
.widget_fit_ranking_archive_class .heading.heading-tertiary a:hover {
	text-decoration:none; /*装飾無し*/
}
.widgetArchive__item.widgetArchive__item-rank:before { /*ランキング番号*/
	width: 2.4rem;
	height: 2.4rem;
	line-height: 2.4rem;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.widget_fit_ranking_archive_class .widgetArchive.widgetArchive-rank div {
		max-width: 158px;
		border-radius: 6px; /*角丸コーナー*/
	}
	.widget_fit_ranking_archive_class .heading.heading-tertiary a {
		font-size: 12px!important;
	}
	.widgetArchive__item.widgetArchive__item-rank:before { /*ランキング番号*/
		width: 2.0rem;
		height: 2.0rem;
		line-height: 2.0rem;
	}
}
@media only screen and (max-width: 410px) { /*iPhone8縦表示対応*/
	.widget_fit_ranking_archive_class .widgetArchive.widgetArchive-rank div {
		max-width: 139px;
		border-radius: 6px; /*角丸コーナー*/
	}
	.widget_fit_ranking_archive_class .heading.heading-tertiary a {
		font-size: 10px!important;
	}
	.widgetArchive__item.widgetArchive__item-rank:before { /*ランキング番号*/
		width: 1.8rem;
		height: 1.8rem;
		line-height: 1.8rem;
	}
}
@media screen and (min-width:768px) { /*PCのみ表示*/
	.widget_fit_ranking_archive_class .eyecatch:hover {
		animation: gatagata 2.0s ease-in 1 forwards; /*アニメーション処理*/
		transition-duration: 0.6s; /*アニメーション*/
		opacity: 0.7;
	}
}
@media only screen and (max-width: 768px) { /*PC以外の表示で投稿数を一つ減らす奇数(9)から偶数(8)表示に変更*/
	.widgetArchive__item:last-child {
		display: none!important;
	}
}

カスタマイズ後のウィジェット [THE]人気記事

今回のカスタマイズによって、「ウィジェット [THE]人気記事」のスタイルは次の様になりました。

表示する投稿数の設定値は【9】とします。

この場合、スマートフォンでは縦2列で表示するため1つ余ってしまいます。

そこでスマートフォンでは設定した表示する投稿数から1引いた投稿数【8】を表示するようにしました。

最後に

人気記事コンテンツは、メインエリアに表示するのが良いのか、サイドバーエリアに表示するのが良いのか迷ってしまいます。

これまではサイドバーエリアに表示させていたので、今後は当面メインエリアで人気記事コンテンツを表示させて様子を見ていきたいと思います。