最近、FPTRENDYのトップページをチェックしていたら、どうにも見出しの整い方がいつもと違う気がしてきました。
あれ…なんか見出しの位置、ズレてない？
とくに気になったのが、ニュース記事のタイトル表示。
いつもは揃って表示されていた「日付の位置」や「タイトルの行揃え」が、なんだかバラバラになってしまっていたのです。
⬇️ ここに崩れた状態のスクリーンショットを挿入
試行錯誤スタート…カテゴリラベル？いや、違う。
最初は「カテゴリのラベル表示かな？」と疑ったのですが、違いました。
そのあと、a.category-link や .post_content あたりを調べてみましたが原因は見つからず…。
Chromeの開発者ツールで構造を追っていったところ、ようやくターゲットが見つかります。
<h2 class="p-postList__title">タイトル</h2>おお！このクラス p-postList__title にCSSがしっかり効いていたようです。
CSSを調整してみる
font-size や line-height を調整するだけでも、かなり印象が変わるはず。ということで、以下のCSSをカスタマイズ画面に追加しました。
/* トップページのタイトルを少しだけ小さく */
h2.p-postList__title {
font-size: 1.1rem !important;
line-height: 1.4 !important;
}⬇️ きれいになった状態のスクリーンショット
結果：バッチリ整いました！
修正後は、見出しがすっきりと揃い、日付の位置も統一されました。
小さな違和感でも、早めにチェックして直すと、全体のクオリティが大きくアップしますね。
📝まとめ：CSSカスタマイズは運営者の味方！
今回は完全に「なんか見づらいな？」という感覚から始まった修正でしたが、開発者ツールで丁寧にクラスを特定すれば、WordPressでも柔軟に対処できると再確認。
こういう“つまずきメモ”も、また次に役立つはずなので記録しておきます。
/* もう一度：使ったCSS */
h2.p-postList__title {
font-size: 1.1rem !important;
line-height: 1.4 !important;
}以上、FPTRENDY運営の裏側でした！😌
