「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カラムが表示され編集できます。

インデックスモードでも利用できます。

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

PC表示時、カラムの並び順を右から左(第1カラムが右側)に変更します。

マルチカラムクラス名:lx_mcol_rtl

 

PC表示時のカラムの並び順が入れ替わります。SP表示は入れ替わりません。

マルチカラムクラス名は第1カラムにしか登録できないので注意が必要です。

※インデックスモードでは利用できません。

 

事業所一覧【Aパターン】にて設置済。

〒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

 

カラム間のマージンを詰めます。

※インデックスモードで、同一行内にカラム間を詰める・詰めないカラムの混在は想定していません。

 そのような場合は個別に設定を追加しましょう。

カラム
カラム
カラム
カラム
カラム
カラム
カラム
カラム
カラム
カラム
カラム
カラム

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