Lightning Works Unit の投稿一覧のレイアウトについて

VWSとは フォーラム Lightning Lightning Works Unit の投稿一覧のレイアウトについて

Lightning Works Unit の投稿一覧のレイアウトについて

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

    RocK
    参加者

    以前、BizVektor Grid Unitを使用していましたが、BizVektor Grid Unitはモバイル表示した際も、
    コンテンツが横並び表示できましたが、
    Lightning Works Unitもモバイル表示した際に横並びは可能なのでしょうか?
    デモサイトを見る限りでは、縦並びになっているので、
    どなたか、横並びした方が居ましたら、ご報告いただきたく思います。
    宜しくお願い致します。

    • このトピックはRocKが4年、 11ヶ月前に変更しました。
    • このトピックはVektor,Incが4年、 11ヶ月前に変更しました。
    #27821

    Vektor,Inc
    キーマスター

    外観 > 追加CSS などに以下のような感じで記載すれば可能です。

    @media (max-width:768px){
    	.works_item{
    		width:50%;
    	}
    }
    #27822

    RocK
    参加者

    キーマスターさん、ありがとうございます。
    BizVektor Grid Unitのように表示できないと購入できないなと検討していたところでした。
    購入し、動作確認できましたら、ベストアンサーをつけさせて頂きます。
    宜しくお願い致します。

    #28485

    RocK
    参加者

    購入し上記追加CSSで2列表示できました。
    PaleⅡの方で設定するんですね。そこをちょっと迷いましたが。。。
    ありがとうございました。

    ついでなのですが、一覧画像サイズの設定変更などはできますか?
    今回は正方形画像のみを使用する予定なので正方形でいいのですが、
    もし、4:3などのサイズの設定もありましたら、
    ご教授願います。

    WordPress:バージョン 5.3.2
    Lightning Proバージョン: 2.6.4
    Lightning Skin Pale:バージョン 3.0.6
    Lightning Works Unit:バージョン 2.1.1

    #28583

    Vektor,Inc
    キーマスター

    CSSを記載する場所は

    * 外観 > カスタマイズ > 追加CSS
    * ExUnit > CSSカスタマイズ
    * 子テーマのstyle.css

    などどこに記載してもかまいません。

    縦横比は現状 6:4 になっています。

    画面サイズに対して縦横比を維持するためにJavaScriptで動的にプログラム処理しているので、
    それを変更しようとする場合は一定の画面サイズ毎に高さを固定する指定をするかたちになりますが、
    そのあたりは個別のカスタマイズになってまいりますので公式なサポート対象外になります。

    下記にカスタマイズに関する基本的な事が記載してありますので参考にしてみてください。

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    #28596

    RocK
    参加者

    キーマスターさん、ご回答ありがとうございます。
    やはり、そうなんですね。
    何となく、難しそうなきはしていました。

    必要であれば個別のカスタマイズをお願いしてみます。
    ありがとうございました。

    #29711

    Vektor,Inc
    キーマスター

    下記を参考に数値を変更すれば、縦横比固定とまではいきませんが、
    近しい表示は出来るのではないかと思います。

    
    .works_item ._thumb {
        height: 200px !important;
    }
    @media (min-width: 576px){
    .works_item ._thumb {
        height: 300px !important;
    }
    }
    @media (min-width: 768px){
    .works_item ._thumb {
        height: 300px !important;
    }
    }
    @media (min-width: 992px){
    .works_item ._thumb {
        height: 300px !important;
    }
    }
    @media (min-width: 1200px){
    .works_item ._thumb {
        height: 300px !important;
    }
    }
    #29712

    Vektor,Inc
    キーマスター

    下記の vw を使えばもっといい感じに調整出来る気がします。
    vw は画面の横幅に対するパーセンテージです。
    現在 15 になっている数字を変更してお好みに調整してください。

    .works_item ._thumb {
        height: 15vw !important;
    }
    @media (min-width: 576px){
    .works_item ._thumb {
        height: 15vw !important;
    }
    }
    @media (min-width: 768px){
    .works_item ._thumb {
        height: 15vw !important;
    }
    }
    @media (min-width: 992px){
    .works_item ._thumb {
        height: 15vw !important;
    }
    }
    @media (min-width: 1200px){
    .works_item ._thumb {
        height: 15vw !important;
    }
    }
    • この返信は4年、 11ヶ月前にVektor,Incが編集しました。
    #29714

    RocK
    参加者

    ご回答ありがとうございます。
    いろいろと、試してみたいと思います。

    #30160

    RocK
    参加者

    いろいろと、試してみましたが、PC表示だけは縦横比が決まってしまっているのでしょうか?
    ご回答宜しくお願いいたします。

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