Simplicityでレスポンシブ２段カラムをカスタマイズする

WordPressテーマSimplicityで２段カラムをカスタマイズします。

WordPressのダッシュボード
→外観
→テーマの編集
→「編集するテーマを選択」Simplicity2 Child
→スタイルシート(style.css)

でCSSを編集します。

copy

/* ２段カラム */
.liquid{
  padding: 0;
}
.liquid-col{
  padding: 0 0 0 0px;
  box-sizing: border-box;
  float: left;
  width: 50%;
}

/* 無色 */
.liquid-col-inner{
  background: none; /*色を変えたければここを変える*/
}

/*レスポンシブ2段カラム*/
@media screen and (max-width: 768px) and (min-width: 481px){
  .liquid-col{
    width: 50%;
  }
}
@media screen and (max-width: 480px){
  .liquid-col{
    width: 100%;
  }
}

/* ２段カラム */

.liquid{

padding: 0;

}

.liquid-col{

padding: 0 0 0 0px;

box-sizing: border-box;

float: left;

width: 50%;

}

/* 無色 */

.liquid-col-inner{

background: none; /*色を変えたければここを変える*/

}

/*レスポンシブ2段カラム*/

@media screen and (max-width: 768px) and (min-width: 481px){

.liquid-col{

width: 50%;

}

@media screen and (max-width: 480px){

.liquid-col{

width: 100%;

}

これをCSSにコピペします。

次に、投稿ページまたは固定ページで２段カラムにしたい部分の記述を説明します。

copy

<div class="liquid">
    <div class="liquid-col"><div class="liquid-col-inner">
この部分に左側に表示したい内容を記載します。
</div></div>

<div class="liquid-col"><div class="liquid-col-inner">
この部分に右側に表示したい内容を記載します。
</div></div></div><hr>