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

INDEX

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

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

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

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

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

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

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

今回は、WordPressテーマ THE THOR（ザ・トール）で「ピックアップ3記事表示調整」のカスタマイズについてまとめてみました。

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

WordPressテーマ THE THOR（ザ・トール）の「ピックアップ3記事」については、過去2回カスタマイズを行いました。

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

WordPressテーマ THE THORでの「ピックアップ3記事見出し」カスタマイズについてまとめてみました。今回は【見出しの左に表示するアイコン】＋【セクションの見出し】と【見出しの右に表示する補足情報】に表示を分けてみました。

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

WordPressテーマ THE THORでの「ピックアップ3記事」カスタマイズについてまとめてみました。今回のカスタマイズでは、ピックアップ3記事の見出しデザインを変更とホバー領域拡大、角丸設定、ホバー処理追加などを行いました。

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

特に問題の無い「ピックアップ3記事」ですが、サイト全体で見ると若干この「ピックアップ3記事」が主張し過ぎているように感じます。

そこで今回、「ピックアップ3記事」を少し抑えた表示にするためのカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）ピックアップ3記事設定箇所
【TOPページ設定[THE]】－【ピックアップ3記事設定】

ピックアップ3記事表示調整のカスタマイズ

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

カスタマイズ内容

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

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズした「■ピックアップ3記事カスタマイズ」に上書きします。

これまで「ピックアップ3記事見出し」のカスタマイズを行っていない場合は、「スタイルシート(style-user.css)」を開き追記する形でOKです。

/************************************
** ■ピックアップ3記事 カスタマイズ
************************************/
.pickup3__container {
	transform: scale(0.95, 0.95); /*ピックアップ3記事全体表示縮小*/
}
.l-headerBottom .wider.dividerBottom {
	box-shadow: none!important; /*シャドー（影）削除*/
}
.l-headerBottom .wider.dividerBottom .pickup3 {
	margin-top: -10px; /*上マージン調整*/
	margin-bottom: 0; /*下マージン調整*/
}
.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: 10px 4px 10px 28px; /*内側余白設定*/
	line-height:140%; /*行の高さ*/
	border-radius: 6px; /*角丸コーナー*/
	transition-duration: 0.6s; /*アニメーション*/
	margin-bottom: 18px;
	margin-right: 9px;
	margin-left: 9px;
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー*/
}
.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; /*アニメーション*/
}
.heading-main.u-white span { /*ピックアップ3記事 見出しカスタマイズ*/
	font-size: 16px!important; /*見出しフォントサイズ 不要の場合削除*/
	font-weight:400!important; /*見出しフォント太さ 不要の場合削除*/
	color: yellow!important; /*見出しフォントカラー デフォルトカラー（ホワイト）の場合削除*/
}
.heading-main.u-white span::before { /*見出し改行*/
	content: "\A";
	white-space: pre;
}
.l-headerBottom .wider.dividerBottom .pickup3 .container .heading.heading-main.u-white.u-bold .icon-headphones { /*見出しタイトルアイコン*/
	margin-right: 0;
}
.pickup3__item:before {
	background-color: #f32469!important; /*背景色*/
	color:#fff; /*数字カラー*/
	font-size: 1.8rem; /*フォントサイズ*/
	font-weight: 900; /*フォント強調*/
	font-style: oblique; /*フォント斜体*/
	opacity: 0.9; /*透過設定*/
	font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif; /*フォント設定*/
}
/************************************
** ■ピックアップ3記事とエリア間のマージン設定
************************************/
.l-wrapper {
	margin-top: 40px;　/*上マージン設定*/
}

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

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

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

「ピックアップ3記事」を全体的に縮小
順位数字（①②③）のデザイン変更
見出しタイトルのアイコン右のすき間削除
「ピックアップ3記事」上マージン調整

を行いました。

最後に

これまで「ピックアップ3記事」機能はほとんど使ってこなかったのでほとんど意識していなかったのですが、今回「ピックアップ3記事」の表示を縮小したことで全体に溶け込んだスタイルになったと思います。

また見出しタイトルや順位数字などのバランスも良くなりました。

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

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

ピックアップ3記事 表示調整のカスタマイズ

カスタマイズ内容

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

最後に

コメント

ピックアップ3記事表示調整のカスタマイズ