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

タグ: Lightning Works Unit

このトピックには9件の返信、2人の参加者があり、最後にRocKにより5年、 10ヶ月前に更新されました。

10件の投稿を表示中 - 1 - 10件目 (全10件中)

投稿者

投稿
2019年12月14日 12:34 PM #27806

RocK
参加者

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

2019年12月14日 3:24 PM #27821
Vektor,Inc
キーマスター
外観 > 追加CSS などに以下のような感じで記載すれば可能です。
```
@media (max-width:768px){
	.works_item{
		width:50%;
	}
}
```
2019年12月14日 3:49 PM #27822

RocK
参加者

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

2019年12月22日 1:40 PM #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

2019年12月24日 12:35 AM #28583

Vektor,Inc
キーマスター

CSSを記載する場所は

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

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

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

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

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

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

2019年12月24日 9:53 AM #28596

RocK
参加者

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

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

2020年1月8日 12:58 PM #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;
}
}
```
2020年1月8日 1:05 PM #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;
}
}
```
2020年1月8日 1:12 PM #29714

RocK
参加者

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

2020年1月12日 1:18 PM #30160

RocK
参加者

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

投稿