全記事リスト(INDEX)を2列表示にするカスタマイズ

html修正と追加

2018年7月2日現時点で最新の La_Vita をサンプルにします。

La_Vita - FC2ブログテンプレート - テンプレート

La_Vitaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

vanillaice000.blog.fc2.com

他のテンプレートも概ね同じ内容なので汎用的に利用できるかと思います。が、絶対とは言わない ←

<!--titlelist--> で検索するとそのすぐ下に

<section class="contents">

というのがありますので、クラス名を以下の通り 変更。

<section class="index-contents">

続きまして同じく <!--titlelist--> の今度はすぐ上に以下の内容を 追加。

<div id="index-wrapper">

続きまして今度は <!--/titlelist--> のすぐ下に以下の内容を 追加。

</div>

ここまでが全記事リストにコンテナ(全体を囲う要素)を追加し、その他ページ種とデザインを共有させないようにするための作業です。

CSSの追加

ここからはCSS内容です。デフォルトCSSの末尾に 追加 します。
既存内容の変更はありません。

#index-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.index-contents {
  width: calc(50% - 10px);
  margin-bottom: 20px;
  padding-left: 15px;/* ボーダーとテキスト書き始めとの距離 */
  border-left: 2px solid rgb(197,166,149);/* 左ボーダーの色 */
}

@media screen and (max-width: 1024px) {
  #index-wrapper {
    display: block;
  }
  .index-contents {
    width: 100%;
  }
}

デザインはかなり適当なので好きに変更してください。
.index-contents の内容にコメントを2つ付けてありますが、この内容は必須ではありません。
元々1列であったものを2列にした際、区切り線が無いと非常に読みづらいため左側にボーダーを付けています。
また、サンプルコードではブレイクポイントを1024pxに設定していますがご自身で適宜調整してください。

まとめ

あくまでのデザインはご自身で上手いことやってもらうということで。
重要なのは どうやって横に並べるの？ という部分かと思いますので、その方法をお伝えしました。

全記事リスト内容は 番号を所有する記事の羅列 です。
FC2ブログでは(というか大抵のサービスでは) 下書き保存したり記事を削除したりなどされますと番号が歯抜けになります。
それが気になるので番号を非表示にしている方もいらっしゃるかもしれません。
ただ閲覧側からすれば番号があることで全部で何記事存在するのか大体の見当がつけられます。
ですから番号の表示には意味があると言えます。

で、番号が付いている場合、web上ではやはり 左から右 へ並べるのが良いでしょうね。
左上 → 左下 → 右上 → 右下
という順序ではやはり閲覧に支障をきたします。

個人的には「番号のついたリストは縦に並べておくのがベスト」だと思っている、というのを念の為お伝えしておきます。