『Corridor』『All-about-us』フッター上新着記事サムネイルリスト仕様変更のお知らせ

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

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

vanillaice000.blog.fc2.com

All-about-us - FC2ブログテンプレート

All-about-usテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com

最新記事リストの仕様

まず、最新記事リストの仕様について簡単な説明です。表示数はテンプレートではなくブログ個人設定で決定します。

『記事の設定』ページへ

サンプルでは8件を新しい順に指定しています。任意設定なので変更したい方はテンプレート内に探すのではなく個人設定を行ってください。

修正前と修正後

ここから旧仕様と新仕様の説明です。

例えば、ブログを開設して間がなく指定表示数に満たない、あるいは個人設定での記事表示数がそもそも少ない場合もあるかと思います。仮に記事が2件しかない、また指定記事数が2件の場合、そして画面幅1100pxでの比較が以下の通りです。

全然大きさ違うんですけども。要するに 表示件数が少ないときに大きくなりすぎないよう処置した ということです。

表示件数が個人設定に依る以上、テンプレートで確実に操作することはできませんので、自身の設定に合わせて横並び数を変更できるようにしました。例えばAll-about-usのデフォルトは

• スマホ(〜767px) --- 2件
• タブレット(768〜1099px) --- 5件
• パソコン(1100px〜) --- 8件

になっています。細かく切り分けし過ぎても管理が大変になりますので、大きく3つに分けました。

レスポンシブデザインであること、画面幅によって件数の増減が変更できないことを前提に、『どの画面サイズでも隙間なくきっちり収める』のは物理的に難しいので、あまりこだわりすぎないのがミソ (o'ω')ﾉ
* display: none による強引な増減調整はおすすめしません。

カスタマイズの仕方

各テンプレートのスタイルシート内に以下のような項目があります。
* Corridorはtbの数値が 4 となっています。

  --recent-feed-items-sp: 2;/* スマートフォン 横並びアイテム数 */
  --recent-feed-items-tb: 5;/* タブレット */
  --recent-feed-items-pc: 8;/* PC */

3行あり、それぞれが 横並びの最大数 を決定しています。任意で変更を行ってください。繰り返しになりますが

〜767px スマートフォン
768〜1099px タブレット
1100px〜 パソコン

がブレイクポイントです。

さいごに

度重なる修正でお手数おかけします。十分な記事数があり、8件以上の表示件数指定を行っている方は無理に再DLする必要はありません。