Lightning 投稿一覧のタイトルと投稿日の表示位置

Lightning の投稿一覧は以下のようにタイトルの下に投稿日が表示されるようになっています。
これは VK Blocks Pro の投稿リストを使用して表示タイプを カード にした例ですが、Lightning 標準 の場合も同様の配置になっています。

VK Blocks Pro

VK Blocks Pro 1.46.0 の便利な新機能「カスタム CSS」New!!

2022年11月23日

VK Blocks Pro

VK Blocks Pro 投稿リストの「テキスト1カラム風」カスタマイズ例

2022年11月9日

VK Blocks Pro

投稿タイトルの前に新着表示したカスタマイズ例 (テキスト1カラム)

2022年11月8日

投稿リストのタイトルと投稿日の位置を入れ替えて、以下のようにしてみましょう。

VK Blocks Pro

VK Blocks Pro 1.46.0 の便利な新機能「カスタム CSS」New!!

2022年11月23日

VK Blocks Pro

VK Blocks Pro 投稿リストの「テキスト1カラム風」カスタマイズ例

2022年11月9日

VK Blocks Pro

投稿タイトルの前に新着表示したカスタマイズ例 (テキスト1カラム)

2022年11月8日

タイトルと投稿日の表示位置を入れ替えるには

出力される HTML をフックを使って改変するやり方もありますが、やや手間がかかります。

それよりも、もっとかんたんなやり方があります。CSS の フレックスボックス を使う方法です。

子テーマの style.css などに以下の CSS を追加するだけでオッケーです。

.card-body {
display: flex;
flex-direction: column;
}

.vk_post .vk_post_title {
order: 2;
}

.vk_post .vk_post_date {
order: 1;
}

上記 CSS は、表示位置を入れ替えるために最低限必要なコードです。さらに上下マージンを調整するコードを追加した方がよいでしょう。

表示位置が入れ替わる仕組み (上記 CSS の解説)

親要素の .card-body に display: flex; を指定することにより、フレックスボックスを使ったレイアウトができるようになります。
そのままでは親要素内のアイテムが横並びになってしまいますので、flex-direction: column; により縦（列方向）に並ぶようにします。
親要素内のアイテムの並び順を order で指定します。数値が小さい順に先頭（上）から配置されます。

表示タイプが メディア の場合や Lightning 標準 のレイアウトの場合は、.card-body の部分を .media-body と書き換えればオッケーです。

タイトル、投稿日以外に親要素内のアイテムがある場合は、そのアイテムにも order の指定が必要です。

CSS をもっとシンプルに

今回のように子要素が2つしかない場合、表示を逆順にするだけでもいいので、以下のようにもっとシンプルに CSS を書くことができます。

.card-body {
display: flex;
flex-direction: column-reverse;
}

フレックスボックスって便利!! これを使うと作業が楽になって、レイアウトの自由度が上がりますね。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら G3 Pro Unit がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています（単体販売はされていません）。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。

購入はこちら