新年あけましておめでとうございます、魚沼情報サービスの対馬です。本年もよろしくお願いいたします。
それでは、今年の初投稿です。
Lightning 投稿一覧のタイトルと投稿日の表示位置
Lightning の投稿一覧は以下のようにタイトルの下に投稿日が表示されるようになっています。
これは VK Blocks Pro の投稿リストを使用して表示タイプを カード にした例ですが、Lightning 標準 の場合も同様の配置になっています。
カスタム分類で選択された複数のタームを親→子の順に表示した例
2025年4月26日
投稿リストのタイトルと投稿日の位置を入れ替えて、以下のようにしてみましょう。
カスタム分類で選択された複数のタームを親→子の順に表示した例
2025年4月26日
タイトルと投稿日の表示位置を入れ替えるには
出力される 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 のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
Lightning テーマ使用
中小企業様、個人事業主様向け
最適なホームページ
を制作いたします
| 制作費用 | クオリティを落とさずに 価格を抑えたサイトを制作します |
| 必要十分 | お問い合わせフォーム、新着情報など 必要なものが最初から揃っています |
| サポート | 1年間のサポートがついて安心 初めてでもホームページを活用できます |
