[ 解決済 ] Lightningアーカイブ設定での画像サイズ

[martim]

Lightning Pro(最新4.3.2にアップデート済み）を購入させて頂き、Lightningアーカイブ設定を使用し、投稿の一覧をアーカイブページに表示しています。

カスタム投稿でポートフォリオ的なものの一覧を表示させているのですが、上手な表示方法が見つからず困っています。画像とタイトルのみを画面サイズに合わせて、2-3列で表示させたいと思っています。

表示タイプはライトニング標準、カード、カード（水平）、メディアと選べるので試行錯誤していますが、ライトニング標準だと１列のみで必要のない投稿日が表示されます。それ以外の表示タイプはカスタマイズが出来て、理想に近いのですが、おそらく投稿の順番等により、一部の投稿で画像の一部が切り抜かれてしまって、中途半端な表示になってしまいます。

カードなどの表示タイプで画像の全てを表示できる方法は無いでしょうか？メディアの設定などで何かコツがありますか？

慣れずになかなかうまくいかないので、質問させて頂きました。よろしくお願いします。

[うなこ]

cssでカード内の画像を全部表示することは可能なのですが…

現在不具合で「Lightningアーカイブ設定」でカスタム投稿タイプはカード表示にできないかもしれません。
（通常の投稿は表示できる）

念のためCSSを添付いたします。

追加CSSなどに以下を追加するとカード内の画像は枠内に収まるようになります。
特定のページのみで対応する場合は、固定ページの該当のページのカスタムCSSに追加してみてください。
もしうまくいかない場合はご返信ください。

.card-post:not(.card-horizontal) .vk_post_imgOuter {
    background-size: contain;
    background-repeat: no-repeat;
}

• この返信は4年前にうなこが編集しました。
• この返信は4年前にうなこが編集しました。

[うなこ]

失礼しました、カスタム投稿タイプもカード表示できることが確認できました。
Lightning Pro バージョン4.3.3

追記ですが、
特定の投稿タイプのみで表示タイプは「カード」で、カード内の画像を枠内に収まるようにする場合は
以下のCSSで表示できると思います。

.vk_posts-postType-○○ .card-post:not(.card-horizontal) .vk_post_imgOuter {
    background-size: contain;
    background-repeat: no-repeat;
}

※vk_posts-postType-○○　の「○○」の部分には投稿タイプID名が入ります。
※:not(.card-horizontal)　はカード水平にした場合には適応されないように追記しています。

[martim]

ご教示いただいた通りにCSSを設定したところ、画像の全てが表示できるようになりました。ありがとうございました！

[martim]

大変申し訳ないですが、追加で質問です。

固定ページに同じものを”投稿ブロック”でカード出力しているのですが、こちらの設定変更のCSSも教えていただけないでしょうか？
よろしくお願いします。

[うなこ]

VK Blocks Proの投稿リストブロックをご利用の場合は以下のCSSを追加すれば
画像の全てが枠内で表示できるようになります。
ただし、全ページの投稿リストブロックとカードブロックに影響が出ますので、
他のページに影響が出ないようにしたい場合は該当の固定ページの下の方に出ている
VK All in one Expansion UnitのカスタムCSS　内にcssを記述して更新していただければ
その固定ページだけで適応できると思います。いかがでしょうか？

.card-post:not(.card-horizontal) .vk_post_imgOuter {
    background-size: contain;
    background-repeat: no-repeat;
}

もしくは、追加CSSなどに記載する場合は
bodyタグについている投稿IDで区別することもできます。

もし違うブロックをご使用の場合はまた教えてください

• この返信は4年前にうなこが編集しました。
• この返信は4年前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[martim]

ありがとうございます！実現できました。

Wordpress/Lighting Proに慣れずになかなか何処のCSSがどこかがわからず質問してしまいました。助かりました！

[投稿者]

投稿