FC2ブログで全記事一覧に画像を表示 2

2019年09月27日

ブログカスタマイズ
2
FC2ブログ
画像ファイルをアップロードしたら、全記事一覧のリストをどんな風に表示させるか考えてみます。

デフォルトの全記事リストを確認する

このブログは、多数のFC2ブログ共有テンプレートを製作されているAkira先生Mystyleというテンプレートをお借りして、ダークモードを使わせていただいています。

このテンプレートの、デフォルトの全記事一覧はこのように表示されます。

そして、このテンプレートでは検索結果が画像付きでリスト表示されます。

サムネイルの独自変数が検索結果でも有効になるためで、下の画像はこのブログ内をsongで検索した結果の表示です。

この画像表示された検索結果リストを参考にレイアウトを考えて行きます。

レイアウトのポイント

上の2枚の画像はスクリーンショットを同じ範囲で切り抜いたものですが、全記事リストが5件に対して検索結果は2件しか見えなくなっています。

つまり検索果リストでは、リストの1件あたりの縦方向のpx値が倍以上であることを意味します。

これはリストを表示させる目的が違うためで、検索結果はFC2ブログの環境設定でページ内に表示する件数が指定されていて、件数が多ければページを移動しながら目的の記事を見つける仕様になっているので、この表示でリストの縦方向が長いと感じることは無いと思います。

MEMO

ちなみに私は検索結果もリストではなく、トップページと同じグリッド表示されるようにカスタマイズしています。

ところが全記事一覧は1000件までは同一ページ内で表示されるため、1件あたりの表示が縦方向に長いとスクロールするのも大変になります。

ですから画像を表示させても、あまり縦方向に長くならないレイアウトでリストをカスタマイズすることが重要なポイントです。

レイアウトの決定

検索結果リストの1件分を切り抜くと、このようなレイアウトになっています。

これを見て、理想的なレイアウトにカスタマイズするために、3つの事が必要だと感じました。

  1. 画像の上にある日付のテキストを左側に寄せる。
  2. 空いたスペースは画像を上に詰める。
  3. 左側の要素間にあるスペースを詰める。
そしてその結果、現在の全記事一覧が出来ました。

先ほどと同じ範囲で切り抜くと3件の表示で、あまり変わっていないようにも見えますが、私のブログはまだ記事数が少ないので、あえて画像のサイズを大きくしているからです。

記事数がある程度多くなったら、記事本文の書き出しを表示する要素の<%titlelist_body>を削除して、それに合わせて画像の表示サイズも小さくするつもりです。

追記:レイアウトを修正しました

上記の方法で、画像表示サイズの縦・横を80pxに変更してコンパクトに修正したリスト。
スマホでの見え方です。

次回はカスタマイズ上の注意点です。

FC2ブログで全記事一覧に画像を表示 3

前回までの方法で全記事一覧に画像を表示させる事が出来ますが、必ず守らないといけない注意点があります。...

2 件のコメント

まだコメントはありません

よつば

2019/11/05 (Tue) 10:05

14: オオーw(*゚o゚*)w

ススムさん いえススム先生♪ おはようございます

すっごい高度なWebテクですね!また一人師と仰ぐ先生が増えました!
自在にWebテクを使いこなし、見やすい記事作りされてますね~
テンプレートも見出し等も、どれも素敵♡
ちょこちょこ覗かせて頂きたいので、リンクさせて頂きます☆
今後ともよろしくお願いします<(_ _)>

ススム

2019/11/05 (Tue) 14:49
ススム

17: To よつばさん

こんにちは、コメントありがとうございます。

分不相応なご評価をいただき、嬉し恥ずかしです (笑)
こちらからもリンクさせていただきました。

よつばさんのブログにも時々コメントさせていただきます。
こちらこそ、今後ともよろしくお願いします。