VWSとは フォーラム Lightning [ 解決済 ] Lightningアーカイブ設定での画像サイズ

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

  • このトピックには6件の返信、2人の参加者があり、最後にmartimにより6ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #35713

    martim
    参加者

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

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

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

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

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

    #35743

    unako
    モデレーター

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

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

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

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

    .card-post:not(.card-horizontal) .vk_post_imgOuter {
        background-size: contain;
        background-repeat: no-repeat;
    }
    • この返信は6ヶ月前にunakoが編集しました。
    • この返信は6ヶ月前にunakoが編集しました。
    #35752

    unako
    モデレーター

    失礼しました、カスタム投稿タイプもカード表示できることが確認できました。
    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) はカード水平にした場合には適応されないように追記しています。

    #35756

    martim
    参加者

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

    #35757

    martim
    参加者

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

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

    #35759

    unako
    モデレーター

    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で区別することもできます。

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

    • この返信は6ヶ月前にunakoが編集しました。
    • この返信は6ヶ月前にunakoが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #35763

    martim
    参加者

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

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。