新年あけましておめでとうございます、魚沼情報サービスの対馬です。本年もよろしくお願いいたします。

それでは、今年の初投稿です。

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

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

カスタマイズ
タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例
VK Blocks Pro
カスタマイズ
VK 投稿リストでカスタム分類のタームを親→子の順に表示した例
ExUnit
カスタマイズ
VK 最近の投稿ウィジェットでクエリを改変するフィルターフック

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

カスタマイズ
タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例
VK Blocks Pro
カスタマイズ
VK 投稿リストでカスタム分類のタームを親→子の順に表示した例
ExUnit
カスタマイズ
VK 最近の投稿ウィジェットでクエリを改変するフィルターフック

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

出力される 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 の解説)

Lightning の投稿一覧で日付をタイトルの上に表示するやり方
  • 親要素の .card-bodydisplay: 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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

メールでのお問い合わせはこちら

Lighting テーマ使用

WordPress サイト開設

スターターパック

  • デザイン済みパーツを組み合わせることで価格納期を大幅削減
  • プロが作ったクオリティが高いホームページ
  • サポート付き・ご自分でかんたんに情報発信できます