(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

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

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

【広告】

※ 本ページには【広告】が含まれています

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

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

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

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

人気記事コンテンツ

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

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

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

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

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

【THE THOR】ウィジェット [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]人気記事」のスタイルは次の様になりました。

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

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

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

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

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

各サイトで横幅が違ってくるので、サムネイル画像の幅をサイトに合わせて調整する必要があります。下記の228pxの部分をサイトに合わせて調整して下さい。
max-width: 228px; /*※各自のサイトに合わせて要調整*/

最後に

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

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

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

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】