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

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

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

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

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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

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

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



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

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

MASAa.net

コメント