Lightning G3無料版のトップページをCSS Gridだけでリスト表示から3列のタイル表示へ変更するイメージイラスト。ビジネススーツ姿の女性がビフォー・アフター画面を指し示している。

Lightning G3無料版のトップページをCSSだけでタイル表示にする【2026年版】

by
WordPressテーマ設計#css#Lightning#WordPress
（更新: ）

WordPressテーマのLightning G3（以下、単にLightning）は無料で使えます。
しかし一部の機能はサブスクのPro版でないと利用できません。
トップページをカード型デザインからタイル（グリッド）型デザインに変更するのも、その機能の一つです。

実はなのですが、

Lightningをタイル型にするのはCSSだけでできちゃいます！コピペで一発です！

本稿では、Lightningをタイル型にするCSSコードと技術上の壁について説明します。

【2026年7月15日全面リライト】
以前はテンプレート差し替えを前提としてPHPとBootstrapでコードを組んでいました。
時代の変化にあわせ、2026年版ではCSSオンリーでタイル型を実現しています。
ライト（明るい）テーマを前提に配色しています。
色は必要に応じて変更してください。

天満川鈴 WRITTEN BY 天満川鈴
INDEX9,331 chars / 16 min
スポンサーリンク

完成画像

テストサイトなのでアイキャッチやタイトルが適当なのは見逃してください。

WordPressテーマLightningのトップページをタイル型にした見本画像

Lightningをタイル型にするCSS

以下のコードを、子テーマの「カスタマイズ」の追加CSSにコピペしてください。

/* =========================================
Lightning 投稿一覧タイル表示（最終解決・決定版）
========================================= */

/* 1. 全体のグリッド化 */
.home .vk_posts {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 32px !important;
margin: 40px 0 !important;
}

/* 2. カード本体：完全に縦並びカードに変形 */
.home .vk_post,
.home .site-body .vk_posts .vk_post {
display: flex !important;
flex-direction: column !important; /* 絶対に縦並び */
width: auto !important;
max-width: none !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
height: 100% !important;
}

/* ホバー時の浮き上がり */
.home .vk_post:hover {
transform: translateY(-6px) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* 3. 背景画像エリア（.vk_post_imgOuter）をカード上部いっぱいに引き伸ばす */
.home .vk_post .vk_post_imgOuter.media-img,
.home .site-body .vk_posts .vk_post .vk_post_imgOuter.media-img {
order: -1 !important; /* カードの最上部に強制配置 */
width: 100% !important; /* 横幅を100%に引き伸ばす */
max-width: 100% !important;
margin: 0 !important; /* 余計な右マージンをリセット */
padding: 0 !important; /* 余計な内余白を排除 */
border: none !important; /* 標準の枠線を消す */
aspect-ratio: 16 / 9 !important; /* 16:9の比率にする */
background-size: cover !important;
background-position: center !important;
transition: transform 0.5s ease !important;
}

/* 16:9比率を維持するための擬似要素の調整 */
.home .vk_post .vk_post_imgOuter:before {
display: none !important; /* 標準の古い padding-top% 指定を無効化 */
}

/* ホバー時に画像をじわっと拡大 */
.home .vk_post:hover .vk_post_imgOuter.media-img {
transform: scale(1.04) !important;
}

/* 4. 本文エリアをカード下部にきれいに収める */
.home .vk_post_body,
.home .vk_post .vk_post_body,
.home .site-body .vk_posts .vk_post .vk_post_body {
flex: 1 !important; /* 残りの高さをすべて埋める */
display: flex !important;
flex-direction: column !important; /* 中身も縦並び */
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 24px !important;
margin: 0 !important;
}

/* 5. タイトル */
.home .vk_post_title,
.home .site-body .vk_posts .vk_post_title {
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
margin: 0 0 12px 0 !important;
}

.home .vk_post_title a {
color: #222222 !important;
text-decoration: none !important;
}

.home .vk_post_title a:hover {
color: #ff8c69 !important;
}

/* メタ情報（日付・カテゴリ） */
.home .vk_post .vk_post_date {
font-size: 0.8rem !important;
color: #888888 !important;
}

/* 6. 抜粋（確実に3行でカットし、右の余白を詰める） */
.home .vk_post_excerpt,
.home .vk_post .vk_post_excerpt,
.home .site-body .vk_posts .vk_post .vk_post_excerpt {
flex: none !important;
width: 100% !important;
margin: 12px 0 0 0 !important;
font-size: 0.88rem !important;
line-height: 1.6 !important;
color: #666666 !important;

/* 3行で省略（...） */
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

/* =========================================
7. 続きを読むボタン（位置の固定と型崩れの破壊）
========================================= */

/* ボタンを囲む親要素（位置をリセットして最下部へ） */
.home .vk_posts .vk_post_btnOuter,
.home .vk_post .vk_post_btnOuter,
.home .vk_post_btnOuter {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important; /* 常にカードの最下部に配置 */
padding: 20px 0 0 0 !important; /* 上の文章との隙間 */
text-align: right !important; /* 右寄せ */
float: none !important;
clear: both !important;
position: relative !important;
}

/* ボタン単体：
「a」「.vk_post_btn」「.btn」など、Lightningが生成しうるすべてのボタン要素をターゲットにして、
絶対配置（position: absolute;）を完全に無効化（relativeへ上書き）します。
*/
.home .vk_posts .vk_post_btnOuter a,
.home .vk_posts .vk_post_btnOuter .vk_post_btn,
.home .vk_posts .vk_post_btnOuter .btn,
.home .vk_post .vk_post_btnOuter a,
.home .vk_post_btnOuter a,
.home .vk_post_btnOuter .vk_post_btn {
/* 位置の絶対指定を強制リセット */
position: relative !important;
display: inline-block !important;
bottom: auto !important;
right: auto !important;
left: auto !important;
top: auto !important;

/* サイズのバグをリセット */
width: auto !important;
height: auto !important;
min-width: 120px !important;
margin: 0 !important;

/* ボタンのデザイン（お好みに合わせて変更可能） */
padding: 10px 24px !important;
background-color: #333333 !important;
color: #ffffff !important;
border-radius: 30px !important;
font-size: 0.85rem !important;
font-weight: bold !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
transition: all 0.25s ease !important;
}

/* ホバー時の挙動もすべてのセレクタで強化 */
.home .vk_posts .vk_post_btnOuter a:hover,
.home .vk_posts .vk_post_btnOuter .vk_post_btn:hover,
.home .vk_posts .vk_post_btnOuter .btn:hover,
.home .vk_post .vk_post_btnOuter a:hover,
.home .vk_post_btnOuter a:hover {
background-color: #ff8c69 !important; /* ホバー時の色 */
color: #ffffff !important;
box-shadow: 0 6px 15px rgba(255, 140, 105, 0.35) !important;
transform: translateY(-2px) !important;
}

/* =========================================
レスポンシブ（タブレット・スマホ対応）
========================================= */

/* タブレット */
@media (max-width: 991px) {
.home .vk_posts {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
}
}

/* スマホ */
@media (max-width: 767px) {
.home .vk_posts {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}

技術的なポイント

タイル型変更を阻んだ2つの壁

今回はGemini執事にコードを依頼しました。
あくまで個人的にはですが、

デザインに優れたコードを書かせるならGeminiがChatGPTより優ると思っています

綺麗で無難なコードを書かせるならChatGPTが優るのですが、デザイン的にはつまらない傾向にあります。

しかし、Gemini執事。

Lightning、頑固すぎます……

ちょっと一筋縄ではいきませんでした。
発生した壁（トラブル）は、以下の2つです。

  • 普通に display: grid を当てても、画像が小さく潰れる。
  • ボタンはカードを突き抜けて右下に暴走。

Lightningの頑固すぎる3つの仕様

頑固さの正体は、以下の3つの仕様によります

① 画像（.vk_post_imgOuter）の「35%制限」と「謎の余白」

仕様の罠: アイキャッチ画像は img タグではなく、divの背景画像（background-image）として出力されていた。
競合: 標準CSSで .vk_post .media-img { width: 35%; } が効いており、横幅が35%に固定。さらに、古いアスペクト比維持のための :before 疑似要素（padding-top: 62%）が干渉し、画像を上部いっぱいに広げようとすると高さが狂う仕様になっていた。

② 親要素の「横並び（display: flex）縛り」

仕様の罠: 投稿カード（.vk_post）自体にテーマ側から横並びのフレックスボックスが指定されていた。
競合: これにより、中身のテキストやボタンが強引に横に並ぼうとして、結果的にボタンが極小サイズに押し潰されていた。

③ 続きを読むボタンの「絶対配置（position: absolute）による暴走」

仕様の罠: ボタン（.vk_post_btnOuter 内の a タグ）に対して、テーマやプラグイン側から position: absolute; や bottom: 15px; などの絶対配置が指定されていた。
競合: カードの一番下にボタンを揃えるために margin-top: auto を指定しても、通常の表示フロー（静的配置）から離脱しているため全く効かず、カードの枠線を無視して右下に張り付いたり、はみ出したりしていた。

解決に導いた「3つのCSSアプローチ」

激戦を制した具体的アプローチとコードの役割です。

対策A：画像エリアの完全な「縦型リセット」

.home .vk_post .vk_post_imgOuter.media-img {
  order: -1 !important;       /* カードの最上部に強制移動 */
  width: 100% !important;      /* 35%制限を破壊して横幅いっぱいに */
  aspect-ratio: 16 / 9 !important; /* モダンな比率指定 */
}
.home .vk_post .vk_post_imgOuter:before {
  display: none !important;    /* 古い％指定の疑似要素を完全に消去 */
}
  • ポイント: 昔ながらの padding-top による比率維持を display: none で黙らせ、モダンな aspect-ratio: 16/9 を注入。背景画像を端から端まで美しく引き伸ばしました。

対策B：フレックス方向の「縦化」

.home .vk_post {
  display: flex !important;
  flex-direction: column !important; /* 横並びを破壊して縦並びに */
}

  • ポイント: 親要素の並び方を「上から下への一本道（column）」に強制変更することで、画像 → 本文 → ボタンの美しい縦並びの土台を作りました。

対策C：絶対配置の「強制 relative 化」と「margin-top: auto」

.home .vk_post_btnOuter a {
  position: relative !important; /* absolute（絶対配置）を強制解除！ */
  display: inline-block !important;
  bottom: auto !important;
  margin-top: auto !important;   /* これで確実に最下部に綺麗に揃う */
}

  • ポイント: 今回の最大の山場。 悪さをしていた position: absolute; を relative に引き戻すことで、ボタンが再びカードの「通常のパーツ」として認識されるようになります。その上で margin-top: auto をかけることで、どんなに抜粋文の長さがバラバラでも、ボタンが自動的にカード最下部へ等しく押し下げられる美しいレイアウトが完成しました。

今回の教訓

2点あります。

教訓その1。

!importantは悪い文明……ではない！

WordPressの人気テーマや有名プラグインは、ユーザーの意図しない「おせっかいな高優先度CSS」を仕込んでいることが多いです。
これに打ち勝つには!importantを多用せざるを得ません。

本来は多用乱用を控えたいところですが、今回はしかたないです

教訓その2。

デベロッパーツールのソース確認は正義

クラス名だけを見てCSSを上書きする」のではなく、「今、どのファイルの、どのプロパティ（特に position や疑似要素）が優先されているか」を突き止めることが、頑固なレイアウト崩れを最速で撃ち抜く方法となります。
なのでLightningに限りませんが、

AI執事に出力を生成してもらうときは現在のHTMLとCSSをあわせて渡すのをおすすめします

まとめ

CSSだけで実現できるなら、その方が初心者にとっては簡単でいいと今回は判断しました。
今やAIに頼めばコードを書いてくれる時代。
本記事を読むとすれば、WordPressにもAIにも慣れていない方と考えましたので。

ただ、PHPを使ってHTML構造から変更するなら、ショートコードを使って固定ページに差し込む形でもタイル型を実現できます。
実際に以前に載せていたコードはそれに近い形での手法を載せていました。
デザインを自分好みに作り込みたいなら、こちらの方法をおすすめします。

Lightningをタイル型にしたいけどサブスク契約するのは悩む……という方、

ぜひ本記事のコードをお試しください！

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。

詳しいプロフィールはこちら

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる