「2カラム」の、PC表示での比率の変更
2カラム(multiColumn2)のカラム割合を変更します。
SP時は、通常の2カラムと同様に、第1カラムが上、第2カラムが下で、コンテンツエリア100%になります。
※カラム間のマージンがある為、厳密に60%:40%等にはなりません。
この設定を利用する事により、
「テキストと画像」パーツで画像表示位置を左or右に設定した場合に、
PC・SP表示共に画像がカラム幅の40%になってしまい、特にSP表示で画像が小さすぎるケースの、表示を改善する事ができます。
もちろん、画像以外を設置する事も可能です。
2カラム比(約8:2)
マルチカラムクラス名:lx_mcol2_ratio82
テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)テキストと画像(8:2)

2カラム比(約7:3)
マルチカラムクラス名:lx_mcol2_ratio73
テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)テキストと画像(7:3)

2カラム比(約6:4)
マルチカラムクラス名:lx_mcol2_ratio64
テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)テキストと画像(6:4)


2カラム比(約2:8)
マルチカラムクラス名:lx_mcol2_ratio28
テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)テキストと画像(2:8)

2カラム比(約3:7)
マルチカラムクラス名:lx_mcol2_ratio37
テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)テキストと画像(3:7)

2カラム比(約4:6)
マルチカラムクラス名:lx_mcol2_ratio46
テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)テキストと画像(4:6)
「2カラム」を利用したPC・SP表示切替
マルチカラムクラス名:lx_mcol2_flip
PC表示時は第1カラムのみが表示され、SP表示では第2カラムのみが表示されます。
どちらのケースでもカラムはコンテンツエリア100%になります。
これより、PC表示とSP表示で異なる画像を置きたい場合や、
PC表示では画像にテキストを重ねて表示し、SPでは画像の下にテキストを配置したい、等のケースに対応できます。
編集画面は通常と同じ様に2カラムが表示され編集できます。
インデックスモードでも利用できます。


---------------------------------------------------------------

〒103-8011 東京都中央区日本橋1-9-1
TEL:03-3276-3600 (代表)
FAX:03-3276-3614
第1カラム |
第2カラム |
第3カラム |
第1カラム |
第2カラム |
第3カラム |
第4カラム |
第1カラム |
第2カラム |
第3カラム |
第4カラム |
第5カラム |
---------------------------------------------------------------
カラムの下マージンをゼロにする
マルチカラムクラス名:lx_col_mb0
カラムの下マージンをゼロにします。(マルチカラムではなく、カラムが対象です)
上下に並んだカラム同士の間を詰めたい場合等に利用できます。
※複数画像に対して、まとめて画像タイトルの設置したいケース等には、
カラムではなく、テキストと画像パーツの下マージンをゼロにするスタイルが有効です。






上の例では、一番上の2カラムのみに設定しています。
---------------------------------------------------------------
カラム間の余白を詰める
マルチカラムクラス名:lx_col_mr0
カラム間のマージンを詰めます。
※インデックスモードで、同一行内にカラム間を詰める・詰めないカラムの混在は想定していません。
そのような場合は個別に設定を追加しましょう。


カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
カラム |
---------------------------------------------------------------