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（ザ・トール）での「メインビジュアル下の注目エリア」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）メインビジュアル下の注目エリア
前回のエントリー記事で「メインビジュアル」のカスタマイズを行いました。
【THE THOR】メインビジュアルのカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「メインビジュアル」のカスタマイズについてまとめてみました。今回はメインビジュアル上の【タイトル】【サブタイトル】に対してエフェクト化（アニメーション）を取り入れてみました。
masaa.net
2021.06.23
現在の「メインビジュアル」下に表示される「メインビジュアル下の注目エリア」のスタイルは、次の様になっています。
特に問題の無い「メインビジュアル下の注目エリア」です。
気になる点としては、「メインビジュアル下の注目エリア」のボタンをホバーすると見難くなってしまいます。
今回、「メインビジュアル下の注目エリア」の気になる点を修正するカスタマイズを行いたいと思います。
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; /*フォントサイズ*/
}
}
カスタマイズ後のメインビジュアル下の注目エリア
今回のカスタマイズによって、「メインビジュアル下の注目エリア」のスタイルは、次の様になりました。
今回のカスタマイズでは、
- メインビジュアル下の注目エリアの縦幅調整
- フォントサイズ調整（スマホ表示含む）
- ボタンホバー時のカラー調整
を行いました。
最後に
今回のカスタマイズでは「メインビジュアル下の注目エリア」を見やすくできました。
特にスマートフォン等の端末で綺麗に表示することができました。
コメント