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

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

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

ZMASAa.blog │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト

PC･ガジェット･デジモノ･車好きのmasaaが情報を発信するサイト

wp.masaa.net

MASAa.blog │ PC･ガジェット･車･パズドラ好きのmasaaの情報発信サイト

PC･ガジェット･車･パズドラ好きのmasaaが情報を発信するサイト

wp.masaa.me

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

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

以前「ピックアップ3記事」のカスタマイズを行いました。

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

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

masaa.net

2021.10.13

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

今回は、その「ピックアップ3記事」の【見出し】についてカスタマイズを行いたいと思います。

「ピックアップ3記事」の【見出し】は、設定で【見出しの左に表示するアイコン】＋【セクションの見出し】＋【見出しの右に表示する補足情報】と言う形式で横一列に表示される仕様です。

今回、【見出しの左に表示するアイコン】＋【セクションの見出し】とその下に【見出しの右に表示する補足情報】を表示するカスタマイズについてまとめてみました。

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

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

カスタマイズ内容

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

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

.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;
}

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

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

今回のカスタマイズでは、上に【見出しの左に表示するアイコン】＋【セクションの見出し】を表示し、その下に【見出しの右に表示する補足情報】を表示する形式としました。

また、【見出しの右に表示する補足情報】は、フォントサイズ、フォント太さ、フォントカラーを変更出来るようにしています。

最後に

今回のカスタマイズは要望が有り対応してみました。全て出来る訳ではありませんが、出来るだけ実現させて行くように努力したいと思います。

と言うことで、WordPressテーマ THE THOR、Cocoonのカスタマイズや使い方等について何かありましたら期待せずにご連絡を頂ければ幸いです。