【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連THE THOR

【THE THOR】メインビジュアル下の注目エリアのカスタマイズ

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

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(ザ・トール)での「メインビジュアル下の注目エリア」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)メインビジュアル下の注目エリア

前回のエントリー記事で「メインビジュアル」のカスタマイズを行いました。

【THE THOR】メインビジュアルのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「メインビジュアル」のカスタマイズについてまとめてみました。今回はメインビジュアル上の【タイトル】【サブタイトル】に対してエフェクト化(アニメーション)を取り入れてみました。

現在の「メインビジュアル」下に表示される「メインビジュアル下の注目エリア」のスタイルは、次の様になっています。

【THE THOR】メインビジュアル下の注目エリアのカスタマイズ

特に問題の無い「メインビジュアル下の注目エリア」です。

気になる点としては、「メインビジュアル下の注目エリア」のボタンをホバーすると見難くなってしまいます。

【THE THOR】メインビジュアル下の注目エリアのカスタマイズ

今回、「メインビジュアル下の注目エリア」の気になる点を修正するカスタマイズを行いたいと思います。

WordPressテーマ THE THOR(ザ・トール)メインビジュアル下お知らせ設定箇所
【TOPページ設定[THE]】-【メインビジュアル下お知らせ設定】

WordPressテーマ THE THOR(ザ・トール)メインビジュアル下の注目エリアのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「メインビジュアル下の注目エリア」のカスタマイズを行います。

カスタマイズ内容

「メインビジュアル下の注目エリア」のカスタマイズ内容は、下記の通りです。

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

/************************************
** ■メインビジュアル下の注目エリア
************************************/
.pickupHead .btn a:hover { /*ボタンホバー時*/
	color: #f32469!important; /*フォントカラー*/
	background: #fff!important; /*背景色*/
	font-weight:400!important; /*フォント太さ*/
	box-shadow: none;
	transform: none;
	border: 1px solid #fff!important; /*枠線*/
}
.pickupHead__text { /*メインビジュアル下の注目エリア*/
	font-size: 16px; /*フォントサイズ*/
	padding-top:10px; /*上間隔調整*/
	padding-bottom:10px; /*下間隔調整*/
}
.container .pickupHead__inner { /*メインビジュアル下の注目エリア*/
	max-height: 64px; /*縦幅*/
}

@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.pickupHead__text { /*メインビジュアル下の注目エリア*/
		font-size: 9px; /*フォントサイズ*/
	}
}

カスタマイズ後のメインビジュアル下の注目エリア

今回のカスタマイズによって、「メインビジュアル下の注目エリア」のスタイルは、次の様になりました。

【THE THOR】メインビジュアル下の注目エリアのカスタマイズ

【THE THOR】メインビジュアル下の注目エリアのカスタマイズ

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

  1. メインビジュアル下の注目エリアの縦幅調整
  2. フォントサイズ調整(スマホ表示含む)
  3. ボタンホバー時のカラー調整

を行いました。

最後に

今回のカスタマイズでは「メインビジュアル下の注目エリア」を見やすくできました。

特にスマートフォン等の端末で綺麗に表示することができました。

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

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

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
少女ウォーズ
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
極道のエデン
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
覇王の天下-戦略シミュレーション
グランドサマナーズ
The King of Fighters '98UM OL

MASAa.net

コメント