「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
カラム間のマージンを詰めます。
※インデックスモードで、同一行内にカラム間を詰める・詰めないカラムの混在は想定していません。
そのような場合は個別に設定を追加しましょう。
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
| カラム |
---------------------------------------------------------------

