WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）の「記事ランキング」のカスタマイズ についてまとめてみました。
記事ランキング
WordPressテーマ THE THOR（ザ・トール）標準機能の「記事ランキング」はこれまで使っていませんでした。
そのため「記事ランキング」のカスタマイズも一切行っていません。
現在の「記事ランキング」のスタイルは、次の様になっています。
特に問題無いスタイルですが、横に広がるタイトルは特に必要無いでしょう。
そこで今回「記事ランキング」をサイトデザインに合わせたスタイルにカスタマイズにしていきたいと思います。
記事ランキングのカスタマイズ
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"; /*（対象期間３０日間）*/
}
.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記事」のスタイルは、次の様になりました。
タイトルをシンプルなスタイルに変更しました。
記事の領域全てをホバー対象とし、フォント調整、間隔調整、ホバー時の処理追加を行いました。
今回、見出しの横の文字列を【対象期間３０日間】としましたが、
の部分を変更することで、【対象期間３０日間】の文字列は変更可能です。
なお、記事ランキング設定の【■見出しの右に表示する補足情報を入力】の設定項目は空白にして下さい。
最後に
今回のカスタマイズにより、「記事ランキング」のコンテンツがサイトデザインに合ったものとなりました。
コメント