【Fancier Author Box】見出しの文字サイズや余白を変更する方法

Wordpres のプラグイン「Fancier Author Box」をインストールしたところ h4 見出しの設定が中途半端な感じになってしまいました。
今回は、H4 見出しを整えるために行ったカスタマイズ方法を共有します!

スポンサーリンク

中途半端に適用された見出しスタイル

「Fancier Author Box」は投稿・固定ページの下に「この記事を書いた人」を表示するためのプラグインです。
プラグインをインストールした後に「あれ?」と思ったのは見出し。

通常設定している H4 見出しの罫線の書式はそのまま反映されるのですが、文字サイズや余白の設定が反映されませんでした。

なんか文字が詰まっててカッコ悪い…。
ということで、見出しを元の H4 見出しと合わせるべくカスタマイズすることにしました。

「Fancier Author Box」の構成

「この記事を書いた人」「最新の記事」とタブが分かれていて、それぞれのスタイルで Class が分かれています。

この記事を書いた人タブの CSS の Class は、「ts-fab-bio-below」、
最新の記事タブの CSS の Class は、「ts-fab-latest-posts-below」です。

それぞれの Class に対して、H4 見出しの設定を行います。

H4 見出しをカスタマイズする方法

stylecss に、タブの class ごとの文字字サイズと余白の設定を追記します
※フォントサイズや余白はご自分のサイトに合わせて修正を行ってください。

たったこれだけの設定ですが、スタイルシートで class と ID とどちらに適用すればいいのか分からず 1 時間ぐらいかかりました💦

まとめ

お役に立ちましたでしょうか?
こういうのをスラスラと解読できたら、もっと WordPress の世界が広がるんだろうな。

実はこのプラグイン 3 年前から更新されていないんですよね。苦笑
インストールしていいのか迷ったけど、便利そうだからインストールしちゃいました。
この記事がお役に立てれば幸いです!

The following two tabs change content below.
47歳の独女(×1)です。 人生最後のあがき!ということでダイエットとたるみ改善に励んでおります。 50歳からの人生を模索中。どうぞよろしくお願いします! 詳しいプロフィールはこちら!
スポンサーリンク
スポンサーリンク