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

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

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

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

VK Blocks Pro
オープニング画面
ローディング画面の作り方 - VK Blocks Pro の固定表示ブロックを使用
Lightning G3
カスタマイズ
サブメニューを開く親項目のリンクを無効にしたスマホ対応のカスタマイズ
VK Filter Search Pro
日付ではなく年と月で範囲を指定して検索するカスタマイズ例

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

VK Blocks Pro
オープニング画面
ローディング画面の作り方 - VK Blocks Pro の固定表示ブロックを使用
Lightning G3
カスタマイズ
サブメニューを開く親項目のリンクを無効にしたスマホ対応のカスタマイズ
VK Filter Search Pro
日付ではなく年と月で範囲を指定して検索するカスタマイズ例

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

出力される 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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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

Lightning テーマ使用

中小企業様、個人事業主様向け

最適なホームページ

を制作いたします

制作費用クオリティを落とさずに



価格を抑えたサイトを制作します
必要十分お問い合わせフォーム、新着情報など



必要なものが最初から揃っています
サポート1年間のサポートがついて安心
初めてでもホームページを活用できます