【そのままコピペ可能】画像つきの長い説明文をコンパクトにする「部分可変の2カラム」（CSSコード付き）

個人ブログで困るのはデザイン（CSS）です。この辺の悩みは尽きません。良いデザインにしたい。良いデザイン案はあるけど、それを自分のサイトに組み込めない。そもそも、CSSが分からない。などです。

この記事では、特に商品紹介、説明時に長くなりそう文章を、コンパクトにしてくれる「部分可変の2カラム」デザイン（CSS）をソースコード付きで紹介します。

良いデザインとは

シンプルになっていることです。また、それを組み込むのが簡単であることも必須です。繰り返し使うためにテンプレート化されているのが望ましいでしょう。

ただ、サイトの記事のデザインをすべて一つに統一するのは効果的ではありません。記事に対して、シンプルなデザイン（CSS）を引き出せるようにしておくことがベストです。例えば、画像のみで成立する記事は、一枚画像を軸にデザインすれば良いです。また、利用しているデバイスごとで表示を変えるというのも必要です。

この記事では、最も困りそうな長い説明が必要とする記事をコンパクトに表示するデザイン（CSS）について書きます。

説明文が長く見える悪いレイアウト

先ずは、よくある説明記事のレイアウトです。画像があって、下に文章があるパターンです。目線は上から下のも流れて、シンプルで良いデザインではあります。

欠点を言えば、文章を細かく書くとすぐ長くなることです。細かく説明文を書けば書くほど、画像が必要になります。見た目が長くなるので、せっかく書いた文章も要点が分からない、退屈なサイトになることに繋がります。さらに言えば、メンテナンスもしづらい記事になります。

画像つき説明文をコンパクトにするレイアウト

このレイアウトで画像つきの長い文章でも簡潔になります。記事内では、CSSを組み込みやすい形にしてるので必要な箇所のみ2列のレイアウトにして、画像付き説明文の手順の流れ等要点が分かりやすくなります。また、スマホを想定して、ウィンドウの縮尺で1カラムにもなるようにしています（リキッドレイアウトに対応しています。）。

CSSサンプル

WordPressに関わらずCSSファイルに、下記をそのままコピペするだけで組み込み完了です。

.products_type {
    font-size: 14px;
    padding: 20px 10px;
    margin: 30px auto;
    background: #f0f1f2;
    box-sizing: border-box;
    line-height: 1.6;
}

.cf::before {
    content: " ";
    display: table;
    box-sizing: border-box;
}

.imgcenter, .imgcenter_height, .imgch {
    text-align: center;
    margin: 0 0 10px;
    box-sizing: border-box;
}

.products_type img, .content-page .products-grid img, .content-page .products_type img, table.img_popup td img {
    width: 100%;
}

.imgcenter img {
    margin: 0 auto;
}

.bdn {
  display: block;
  max-width: 100%;
  height: auto;
  border: none !important;
}

.products_type_inner3 {
    width: 100%;
    box-sizing: border-box;
    line-height: 1.6;
}
.pb10 {
    padding-bottom: 10px !important;
    line-height: 1.6;
}

.mb0 {
    margin-bottom: 0 !important;
}

.fz16 {
    font-size: 16px;
}

.products_type_inner3 > p {
    /* margin: 0 0 10px; */
    margin: 0 0 0;
}

@media (min-width:768px) {
 .products_type_inner3 {
    float: left;
    clear: none;
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    }
    .products_type_inner3 {
      width:50%
    }
    .products_type_inner4 {
      width:25%
    }
    .cf+.cf,.cf+h4 {
      margin-top:40px!important
    }
    .products_type {
      float: left;
    }
  }

HTMLサンプル

使い方は簡単で、下記のようにCSSクラスを適用してあげるだけで、そのブロックが可変の2カラムレイアウトになります。

<div class="products_type cf">
 <div class="products_type_inner3 pb10">
  <p class="imgcenter"><img class="bdn" src="https://画像.jpg" alt="" width="320" height="240"></p>
  <p class="fz16 mb0"><strong>表題</strong></p>
  <p>内容</p>
 </div>
</div>

このレイアウトを実際に用いている記事

PCを自作する記事「【2021年度】Ryzen™ 9 5950Xと3080tiで組み上げる自作PC手順」ということで、1ステップ毎の説明が必要になる記事でした。また、文章だけでは当然読みづらくなるため、対になる画像を載せていくと膨大な長さになる記事でした。

PC上では、それを途中から2列カラムに可変することで非常に見易くなっているのが分かります。また、横幅サイズで自動的にレイアウトが変わるため、ウィンドウの幅を縮めると、その縮小サイズに合った画面レイアウトに変わるのが分かるかと思います（リキッドレイアウトにしています。）。スマホで見た際は、スマホに最適な1カラム表示になります。