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

【THE THOR】記事ランキングのカスタマイズ

アイキャッチ画像 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(ザ・トール)の「記事ランキング」のカスタマイズ についてまとめてみました。

記事ランキング

WordPressテーマ THE THOR(ザ・トール)標準機能の「記事ランキング」はこれまで使っていませんでした。

そのため「記事ランキング」のカスタマイズも一切行っていません。

現在の「記事ランキング」のスタイルは、次の様になっています。

特に問題無いスタイルですが、横に広がるタイトルは特に必要無いでしょう。

そこで今回「記事ランキング」をサイトデザインに合わせたスタイルにカスタマイズにしていきたいと思います。

WordPressテーマ THE THOR(ザ・トール)記事ランキング設定項目
【TOPページ設定[THE]】-【記事ランキング設定】

記事ランキングのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)の「記事ランキング」のカスタマイズを行います。

カスタマイズ内容

「記事ランキング」のカスタマイズ内容は、下記の通りです。

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

※【@keyframes gatagata { /*アニメーションgatagata動作内容*/】の部分は、既に「スタイルシート(style-user.css)」内に記述されている場合には必要ありません。

/************************************
** ■TOPページ設定[THE]-記事ランキング設定のカスタマイズ
************************************/
.rankingBox {
	box-shadow: none;
}
.rankingBox .rankingBox__bg {
	background-color: transparent;
}
.rankingBox {
	padding-top: 0;
	padding-bottom: 20px;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.rankingBox {
		padding-top: 0;
		padding-bottom: 20px;
	}
}
.rankingBox__item {
	border: 1px solid #ff75a7!important; /*枠線*/
}
.rankingBox .u-white { /*人気記事タイトル*/
	color: #36414d;
	margin-bottom: 10px;
	font-weight: 500; /*フォント強調*/
	font-size: 22px;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.rankingBox .u-white {
		font-size: 18px;
	}
}
.rankingBox .dateList {
	text-align: right; /*右寄りに設定*/
	margin-bottom: 0;
}
.rankingBox .dateList__item {
	color: rgba(0,0,0,1);
}
.rankingBox .rankingBox__contents {
	padding: 0 10px 12px 10px;
	word-break: break-all; /*表示範囲に合わせて改行*/
}

.rankingBox .rankingBox__item { /*人気記事ランキング*/
	position: relative!important;
}
.rankingBox .rankingBox__item a::after { /*人気記事ランキング ホバー領域拡大*/
	content: "";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
	pointer-events:auto;
	background-color: transparent;
}
.rankingBox .rankingBox__item:hover { /*ホバー時処理*/
	background-color:  #fff9fc; /*背景色*/
}
.rankingBox .heading.heading-tertiary a:hover { /*ホバー時処理*/
	text-decoration:none!important; /*装飾無し*/
	color: #bf0042
}
@media screen and (min-width:768px) { /*PCのみ表示*/
	.rankingBox .rankingBox__item:hover .eyecatch {
		animation: gatagata 2.0s ease-in 1 forwards; /*アニメーション処理 ※アニメーションは「■エントリー記事カードのアイキャッチのカスタマイズ」の【gatagata】使用*/
		transition-duration: 0.6s; /*アニメーション*/
		opacity: 0.7;
	}
}
.rankingBox .heading-main.u-white span::before { /*見出しの右に表示する補足情報*/
	color: #000;
	content: "\ff08bfec611f93\ff13\ff10e593\ff09"; /*(対象期間30日間)*/
}

.widget.widget-menu.widget_fit_ranking_archive_class { /*「ウィジェット[THE]人気記事」を設定しておかないと「記事ランキング設定」が消えてしまうので、意図的に「ウィジェット[THE]人気記事」を設定して強制非表示とする*/
	display: none!important;
}
@keyframes gatagata { /*アニメーションgatagata動作内容*/
  0% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(6deg, 6deg);
  }
  10% {
    transform: skew(-5deg, -5deg);
  }
  15% {
    transform: skew(4deg, 4deg);
  }
  20% {
    transform: skew(-3deg, -3deg);
  }
  25% {
    transform: skew(2deg, 2deg);
  }
  30% {
    transform: skew(-1deg, -1deg);
  }
  35% {
    transform: skew(0.8deg, 0.8deg);
  }
  40% {
     transform: skew(-0.6deg, -0.6deg);
  }
  45% {
    transform: skew(0.4deg, 0.4deg);
  }
  50% {
    transform: skew(-0.2deg, -0.2deg);
  }
  55% {
    transform: skew(0deg, 0deg);
  }
}

カスタマイズ後の記事ランキング

今回のカスタマイズによって「ピックアップ3記事」のスタイルは、次の様になりました。

タイトルをシンプルなスタイルに変更しました。

記事の領域全てをホバー対象とし、フォント調整、間隔調整、ホバー時の処理追加を行いました。

今回、見出しの横の文字列を【対象期間30日間】としましたが、

content: "\ff08\5bfe\8c61\671f\9593\ff13\ff10\65e5\9593\ff09"; /*(対象期間30日間)*/

の部分を変更することで、【対象期間30日間】の文字列は変更可能です。

なお、記事ランキング設定の【■見出しの右に表示する補足情報を入力】の設定項目は空白にして下さい。

最後に

今回のカスタマイズにより、「記事ランキング」のコンテンツがサイトデザインに合ったものとなりました。

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

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】