【THE THOR】ピックアップ3記事のカスタマイズ

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（ザ・トール）での「ピックアップ3記事」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）ピックアップ3記事

これまでZMASAa.blog及びMASAa.blogにおいて、「ピックアップ3記事」機能は使っていませんでした。

現在の「ピックアップ3記事」のスタイルは、次の様になっています。

これまでのカスタマイズにより、不要なシャドー（影）が表示されたりと若干変な表示になっています。

そこでこれまでのカスタマイズで変になった「ピックアップ3記事」の表示を修正し、更にシンプルさを求めた「ピックアップ3記事」にカスタマイズを行いたいと思います。

ピックアップ3記事のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「ピックアップ3記事」のカスタマイズを行います。

カスタマイズ内容

「ピックアップ3記事」のカスタマイズ内容は、下記の通りです。

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

/************************************
** ■ピックアップ3記事 カスタマイズ
************************************/
.l-headerBottom .wider.dividerBottom {
	box-shadow: none!important; /*シャドー（影）削除*/
}
.l-headerBottom .wider.dividerBottom .pickup3 {
	margin-top: -20px; /*上マージン調整*/
}
.l-headerBottom .wider.dividerBottom .pickup3 .pickup3__bg {
	display: none!important; /*背景見出し削除*/
}
.pickup3__item.pickup3__item-third,
.pickup3__item.pickup3__item-second,
.pickup3__item.pickup3__item-first {
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
	border-radius: 8px; /*角丸コーナー*/
}
.l-headerBottom .wider.dividerBottom .pickup3 .container .heading.heading-main.u-white.u-bold { /*見出しタイトル*/
	display: block;
	position: relative;
	word-break: break-all; /*表示範囲に合わせて改行*/
	background:linear-gradient(160deg, #ff75a7, #ff75a7, #ffddee); /*タイトル背景カラー*/
	color:#fff; /*文字色*/
	font-size:18px; /*フォントサイズ*/
	letter-spacing:1px; /*文字間隔*/
	text-decoration:none; /*装飾無し*/
	font-weight:bold; /*フォント太さ*/
	padding: 12px 4px 12px 24px; /*内側余白設定*/
	line-height:140%; /*行の高さ*/
	border-radius: 6px; /*角丸コーナー*/
	transition-duration: 0.6s; /*アニメーション*/
	margin-bottom: 20px;
}
.l-headerBottom .wider.dividerBottom .pickup3 .container .heading.heading-main.u-white.u-bold::after { /*見出しタイトル*/
	position: absolute;
	top: 0.3em;
	left: 0.6em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 0.6em);
	height: calc(100% - 0.6em);
	background-color: #fff;
	border-radius: 4px;
}
.heading.heading-pickup3 a::after { /*ピックアップ3記事 ホバー領域拡大*/
	content: "";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
	pointer-events:auto;
	background-color: transparent;
}
.pickup3__item .eyecatch { /*ピックアップ3記事 アイキャッチ*/
	transition-duration: 0.6s!important; /*アニメーション*/
}
.pickup3__item:hover .eyecatch { /*ピックアップ3記事 アイキャッチ ホバー処理*/
	transition-duration: 0.6s!important; /*アニメーション*/
	opacity: 0.6!important; /*不透明度*/
}
.pickup3__item:hover .heading.heading-pickup3 a { /*ピックアップ3記事のタイトル ホバー処理*/
	animation:none; /*blink点滅処理停止*/
	text-decoration:none!important; /*ホバー時アンダーライン無し*/
	color: #ffddee; /*文字色*/
}

.pickup3__item {
	transition-duration: 0.6s!important; /*アニメーション*/
}
.pickup3__item:hover {
	-webkit-transform: translateY(-6px); /*浮かす*/
	-ms-transform: translateY(-6px); /*浮かす*/
	transform: translateY(-6px); /*浮かす*/
	transition-duration: 0.6s!important; /*アニメーション*/
}

カスタマイズ後のピックアップ3記事

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

今回のカスタマイズでは、

• ピックアップ3記事の見出しデザインを変更
• ピックアップ3記事 ホバー領域拡大
• 角丸設定
• ホバー処理追加

などについて行いました。

最後に

デフォルトの「ピックアップ3記事」と比べるとシンプルなデザインになりました。

デフォルトの「ピックアップ3記事」のデザインは主張過ぎでしたが、今回カスタマイズした「ピックアップ3記事」はサイトに浸透するデザインだと思います。