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

カスタマイズ

2018/07/02 2018/09/28 0

vanillaice (Akira)

Instruction Tips 中級者向け

ご要望がありましたので記事にしたいと思います。

私の制作したテンプレート限定の内容です。

htmlの修正とCSSの追加が必要になります。
ごく簡易的な方法ですのでデザイン面は追求していません(笑)
ともかく 2列に並べるという点が主題です。

html修正と追加

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

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

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

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

で検索するとそのすぐ下に

<section class="contents">

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

<section class="index-contents">

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

<div id="index-wrapper">

続きまして今度は  のすぐ下に以下の内容を追加。

</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上ではやはり左から右へ並べるのが良いでしょうね。
左上 → 左下 → 右上 → 右下
という順序ではやはり閲覧に支障をきたします。

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

Instruction Tips 中級者向け