(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

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

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

【広告】

※ 本ページには【広告】が含まれています

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

シェアする
※ 記事内には【広告】が含まれています
MASAa.net

コメント

【広告】