HP：3列表示の方法

2020.5.3 中村

左右に画像を縦に並べ、中央に文章を持ってくる３列表示の方法

例）2019年『宝塚歌劇　雪組公演』観劇会

  1. 応用カラム機能で１：２：１の3カラムを使用
  2. 左右画像に各々縦２枚を並べる場合はギャラリー画像のカラムの３を指定、縦に３枚を並べるなら３を指定、縦に4枚を並べるなら4を指定する。これで縦が1列の画像列となる。
    これをするにはギャラリー画像の横４枚の最大サイズと同じ 232pxの画像をCSSで最小値min-width:232px;の指定する。これで同じサイズの画面表示ができ、画面全体で違和感のない表示となる。

 

3column-display-chart

ブラウザＩＥをお使いの方、あるいはダウンロードする場合はここをクリックしてください

 

4. 関連CSS

/* 3列表示の場合 */
/*パソコン用のギャラリー画像の大きさをmaxに合わす */
.gallery-item {min-width:232px;}

/*スマホ用2枚表示に画像の大きさを適度にしておく*/
@media only screen and (max-width:767px){.gallery-item {min-width:148px;}}

/*============================================
  　columnの設定変更
============================================*/

/* 標準2 カラム様式の右に区切り線を入れる*/
.post_content .post_col,.post_content .post_col-2{border-right: 1px dashed ;}
.post_content .post_col:last-child,.post_content .post_col-2:last-child{border-right: none ;}
@media only screen and (max-width: 767px)
{.post_content .post_col,.post_content .post_col-2 {border: none ;}}

/* 応用columnの大きさを調整 */
.wc-shortcodes-one-half, .wc-shortcodes-one-third, .wc-shortcodes-two-third, .wc-shortcodes-three-fourth, .wc-shortcodes-one-fourth, .wc-shortcodes-one-fifth, .wc-shortcodes-two-fifth, .wc-shortcodes-three-fifth, .wc-shortcodes-four-fifth, .wc-shortcodes-one-sixth, .wc-shortcodes-five-sixth { margin-left: 1%;}
.wc-shortcodes-one-fourth {width: 24%; padding:0 ;margin-left: 1%;}
.wc-shortcodes-two-third {width: 67%;}
.wc-shortcodes-one-third {width: 32%;}

/* 1/2は左右空ける */
.wc-shortcodes-one-half { width: 49.5%;padding:0 8px;}
/*.wc-shortcodes-one-half.wc-shortcodes-column-first { border:1px solid;}
.wc-shortcodes-one-half.wc-shortcodes-column-last  { border: 1px solid; }*/

/* 縦区切り線
#half .wc-shortcodes-one-half.wc-shortcodes-column-last { border-left:1px dotted;} */

/* 画像サイズをフルにする */
.post_content .wp-caption { padding: 0px;}

以上

 

記事がよければ「いいね！マーク」のクリックをお願いします

PAGE TOP