【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約6分で読めます。
スポンサーリンク

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

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

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

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

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

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

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

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

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

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

WordPressテーマ THE THOR(ザ・トール)ピックアップ3記事設定箇所
【TOPページ設定[THE]】-【ピックアップ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記事」のスタイルは、次の様になりました。

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

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

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

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

最後に

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

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

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

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント