【Lightningテーマ】カテゴリーページや検索結果ページで「続きを読む」ボタンが文字に重なる時のCSS修正

WordPressテーマ「Lightning」を使用していると、カテゴリーページや検索結果ページの記事一覧で、「続きを読む」ボタンが本文や画像と重なって表示されることがあります。ただし、Lightningを使っているから必ず発生する問題ではなく、テーマ・子テーマ・追加CSS・プラグイン・投稿一覧のレイアウト設定などによって原因は異なります。

特に、ボタンやその親要素へ position: absolute;、負のマージン、固定した高さなどが指定されていると、本文と重なる場合があります。この記事では、まず原因となっているCSSを確認し、position が原因だった場合に安全に通常の配置へ戻す方法を解説します。

1 最初に「何が重なりを起こしているか」を確認する

「続きを読む」ボタンが本文と重なっているからといって、最初から position: absolute; が原因と決めつけないことが重要です。CSSでは、さまざまな指定によって要素の重なりや位置ずれが発生します。

• position: absolute; による絶対配置
• margin-top などの負のマージン
• height による高さ固定
• overflow: hidden; による表示領域の制限
• FlexboxやGridの配置設定
• 子テーマや追加CSSによる上書き
• プラグインが追加したCSS

そのため、まずブラウザの開発者ツールを使って、実際にどのCSSがボタンへ適用されているか確認します。

2 Chromeの開発者ツールで確認する方法

Google Chromeの場合は、重なっている「続きを読む」ボタン付近を右クリックして「検証」を選択します。開発者ツールの「Styles」欄から、ボタンやその親要素に適用されているCSSを確認できます。

たとえば、次のような指定が見つかった場合は、ボタンが通常の文書の流れから外れている可能性があります。

.vk_post_btnOuter {
	position: absolute;
}

この場合は、どのCSSファイルから指定されているかも確認してください。Lightning本体ではなく、子テーマの style.css、WordPressの追加CSS、以前追加したカスタマイズコードなどが原因になっている場合もあります。

3 Lightningの投稿一覧は設定によって構造が異なる

Lightningでは投稿一覧にVK Components系の仕組みが利用されており、投稿一覧のレイアウトや「続きを読む」ボタンの表示は設定によって変わる場合があります。そのため、すべてのLightningサイトでまったく同じHTML構造になるとは限りません。

この記事では、開発者ツールで次のようなクラスが確認できたケースを例にします。

• .vk_post
• .vk_post_btnOuter
• .vk_post_btn

実際のサイトでクラス名が異なる場合は、そのサイトのHTMLに合わせてセレクタを変更してください。

4 position:absoluteが原因だった場合の修正例

開発者ツールで確認した結果、.vk_post_btnOuter やボタン自体へ position: absolute; が指定され、それが本文との重なりを起こしている場合は、通常の文書フローへ戻します。

/* ---------------------------------------------
 * Lightning：カテゴリー・検索結果ページ
 * 「続きを読む」ボタンの重なり修正例
 * --------------------------------------------- */

body.category .vk_post .vk_post_btnOuter,
body.search .vk_post .vk_post_btnOuter {
	position: static;
	margin-top: 10px;
	margin-bottom: 20px;
}

body.category .vk_post .vk_post_btn,
body.search .vk_post .vk_post_btn {
	position: static;
	display: inline-block;
}

position: static; は、通常のCSS配置へ戻すための指定です。絶対配置が原因だった場合は、ボタンが本文の後ろへ自然に配置されるようになります。

5 position:relativeは「固定解除」ではない

位置指定を解除するCSSとして、次のようなコードが紹介されることがあります。

position: relative;

しかし、position: relative; は「位置指定を解除する」という意味ではありません。要素は通常フロー上の位置を保ちますが、位置指定可能な要素となり、絶対配置された子要素の基準になる場合もあります。

単純に position: absolute; を解除して通常の配置へ戻したい場合は、基本的には position: static; を使用します。

6 z-indexは今回の修正では基本的に不要

ボタンが他の要素と重なっていると、次のように z-index を大きくする方法を試したくなるかもしれません。

z-index: 10;

しかし、z-index は要素の前後関係を変更するもので、本文とボタンが重なっている根本原因を解決するものではありません。今回の目的は「ボタンを本文より前面へ出す」ことではなく、本文とボタンが重ならない通常の配置へ戻すことです。

position が原因なら、まず通常フローへ戻すことで解決を試します。必要性を確認せず z-index を追加すると、別の画像やメニューなどとの重なり順に影響する場合があります。

7 カテゴリーと検索結果だけに限定する理由

今回のCSSでは、WordPressがbody要素へ付けるクラスを利用して適用範囲を限定しています。

body.category
body.search

さらに、その中の .vk_post 内にあるボタンだけを指定しています。

body.category .vk_post .vk_post_btnOuter
body.search .vk_post .vk_post_btnOuter

これによって、固定ページや通常の投稿本文など、今回修正する必要がない場所へ同じCSSが適用される可能性を減らせます。

8 特定のカテゴリーページだけ修正する方法

すべてのカテゴリーページではなく、特定のカテゴリーだけで問題が発生している場合は、bodyクラスをさらに限定できます。たとえばカテゴリーIDが10の場合、WordPressでは通常 category-10 のようなクラスがbodyへ付与されます。

body.category-10 .vk_post .vk_post_btnOuter {
	position: static;
	margin-top: 10px;
	margin-bottom: 20px;
}

カテゴリーのスラッグを使ったクラスが付いている場合もあるため、実際のbodyクラスは開発者ツールで確認してください。

9 最初から!importantを付けない

テーマのCSSを上書きするために、すべての指定へ !important を付ける例もあります。

position: static !important;
margin-top: 10px !important;

しかし、!important を付ければ安全になるわけではありません。指定が強くなるため、テーマやプラグインを更新したあとでも古いカスタマイズCSSが優先され、逆にレイアウト調整を難しくする場合があります。

まずは次のように、対象を十分限定した通常のCSSで試します。

body.category .vk_post .vk_post_btnOuter,
body.search .vk_post .vk_post_btnOuter {
	position: static;
	margin-top: 10px;
	margin-bottom: 20px;
}

それでも開発者ツールで確認してテーマ側の指定に負けている場合だけ、必要なプロパティに限定して !important を検討します。

10 どうしてもpositionが上書きできない場合

実際にテーマや追加CSS側で !important が使用されており、通常の指定では上書きできない場合は、原因を確認したうえで次のように限定して使用できます。

body.category .vk_post .vk_post_btnOuter,
body.search .vk_post .vk_post_btnOuter {
	position: static !important;
	margin-top: 10px;
	margin-bottom: 20px;
}

body.category .vk_post .vk_post_btn,
body.search .vk_post .vk_post_btn {
	position: static !important;
}

この場合も、すべてのプロパティへ無条件に !important を付けるのではなく、実際に競合している指定だけに使用します。

11 positionを直しても重なる場合

position: static; に変更しても直らない場合は、別のCSSが原因です。特に次の指定を確認してください。

11.1 高さが固定されていないか

.vk_post {
	height: 200px;
}

本文量が増えても高さが200pxのままだと、内部要素が枠からはみ出して次の記事やボタンと重なる場合があります。特別な理由がなければ、固定高さを解除するか min-height など別の方法を検討します。

11.2 負のマージンがないか

.vk_post_btnOuter {
	margin-top: -30px;
}

負のマージンによってボタンを上方向へ移動している場合は、本文と重なる可能性があります。

11.3 overflowを確認する

.vk_post {
	overflow: hidden;
}

overflow: hidden; があると、投稿カードからはみ出した部分が隠れる場合があります。ボタンそのものが消えている場合は、親要素の overflow も確認してください。

12 FlexboxやGridが原因の場合もある

投稿一覧がFlexboxやCSS Gridで構成されている場合は、position だけではなく、display・align-items・grid-template・gap などが位置関係へ影響する場合があります。

そのため、原因を確認せず次のように強制するのも避けた方が安全です。

display: block !important;

親要素がFlexboxやGridを前提としている場合、display を無理に変更すると別のレイアウト崩れを起こす可能性があります。

13 CSSを追加しても変わらない場合

修正CSSを追加しても表示が変わらない場合は、次の項目を確認します。

• 実際のHTMLに .vk_post があるか
• .vk_post_btnOuter や .vk_post_btn が存在するか
• CSSを追加したファイルが読み込まれているか
• セレクタの詳細度で別のCSSに負けていないか
• ブラウザキャッシュが残っていないか
• サーバーキャッシュが残っていないか
• CloudflareなどCDNのキャッシュが残っていないか

開発者ツールで対象要素を選択し、追加したCSSがStyles欄に表示されているか確認すると切り分けやすくなります。

14 Lightning本体のCSSを直接編集しない

修正CSSは、Lightning本体のCSSファイルを直接変更するのではなく、子テーマの style.css やWordPressの追加CSSなどへ記述します。親テーマを直接編集すると、Lightningをアップデートした際に変更内容が上書きされる可能性があります。

15 修正後イメージ

原因となっていた位置指定を解除できれば、「続きを読む」ボタンが本文の下に自然に配置されます。

16 今回の基本CSS

開発者ツールで確認し、position: absolute; が原因だった場合の基本的な修正例は次のコードです。

/* Lightning
 * カテゴリー・検索結果ページ
 * 「続きを読む」ボタンの位置指定解除例
 */

body.category .vk_post .vk_post_btnOuter,
body.search .vk_post .vk_post_btnOuter {
	position: static;
	margin-top: 10px;
	margin-bottom: 20px;
}

body.category .vk_post .vk_post_btn,
body.search .vk_post .vk_post_btn {
	position: static;
	display: inline-block;
}

ただし、このコードはすべてのLightningサイトへ無条件に追加するためのものではありません。開発者ツールで同じクラスと位置指定が確認できた場合に使用する修正例です。

17 まとめ

Lightningのカテゴリーページや検索結果ページで「続きを読む」ボタンが本文と重なる場合は、最初からテーマの不具合や z-index の問題と決めつけず、開発者ツールで実際のCSSを確認します。position: absolute; が原因であれば、position: static; に戻すことで通常の文書フローへ戻せる場合があります。

• 最初に開発者ツールで原因となるCSSを確認する
• position: relative; は位置指定解除ではない
• 絶対配置を解除するなら基本は position: static;
• 重なり修正のために不要な z-index を追加しない
• !important は必要な場合だけ使用する
• .vk_post などを使って適用範囲を限定する
• 高さ固定・負のマージン・overflow・Flexbox・Gridも確認する
• Lightning本体ではなく子テーマや追加CSSへ修正を記述する

「続きを読むボタンが重なる」という見た目だけで原因を決めず、どのCSSが位置を変えているのかを確認して、その原因だけを修正することが最も安全です。 Lightningや関連コンポーネントはアップデートでHTML・CSSが変更されることもあるため、古い修正コードをそのまま使い続けるのではなく、現在のHTML構造を確認してから調整しましょう。