I Found It!

広告

このカテゴリーの最新記事、のレスポンシブ化

数回に分けてＰＣ版テンプレートをレスポンシブ化してスマホ版とＰＣ版を統合する方法を紹介していましたが、レスポンシブ化の途中にウィンドウサイズを小さくすると「このカテゴリーの最新記事」のサムネイル画像がおかしくなったりレイアウトが崩れたりしてたのをすっかり忘れていました。ひとまずコメントアウトして「後で修正しよう」と思ったんだった…。ということで、今回はBootstrapのグリッドシステムという仕組みを使って「このカテゴリーの最新記事」をレスポンシブ表示する方法を紹介したいと思います。完成イメージはサムネイルつきで、スマホサイズではこんな感じになります。

変更の前にあらかじめcssとhtmlのバックアップを取っておいてください。
Added at 2016/10/29
「このカテゴリーの最新記事」部分にBootstrapのグリッドシステムを使うためにはまずメインレイアウト（メインコンテンツ部分とサイドバーのレイアウト）部分にこのグリッドシステムを使う必要があります。まずメインレイアウトにグリッドシステムを採用する方法 を参考に、メイン部分にグリッドシステムを使うよう変更してください（左右のサイドバーがない場合はid="containter"にcontainerクラスを追加する部分とcontainerのスタイル指定削除部分だけでOKです）。今回は「このカテゴリーの最新記事」部分を入れ子にするためにrowにしていきます。

「このカテゴリーの最新記事」では5件の最新記事が表示されます。画面が大きいときは横に5件並べたいですよね。しかし、上記の記事で紹介したBootstrapのグリッドシステムの基準となる12という数字が5で割り切れない！…ということで、5等分割して並べられるように新しくクラスを追加します。あまり画面が小さいと5分割は小さすぎるので、xs→2分割、sm→3分割、md,lg→5分割にしてみます。ということで、必要最小限のクラスを追加すると、こんな感じになります。下記をcssに追加してください。

@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
}

上記の5列表示対応で各記事を等幅で表示できるようになりましたが、記事によってサムネイルの縦横比やタイトルの長さは違いますから、サムネイルとタイトルを上下に並べると高さがバラバラになってしまいます。高さがバラバラだと隙間を埋めるように記事が配置され、2行以上で表示させた時にきれいに縦位置がそろってくれません。これをそろえるために、今回はBootstrapのrowに代わるクラスを追加します。下記をcssに追加してください。

.row-eq-height {
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

今回の変更では画像なしの記事の場合に用意したNoImage用の画像を表示させます。NoImage用の画像を画像管理から追加してください。
あとはhtmlを書きかえるのみです。
htmlの【このカテゴリーの最新記事】の直後にある<ul>…</ul>の部分を下記に書きかえます（NoImage画像のパスは変更してください）。変更して見つけられない場合は、コメント関連の記述の上のページャのもう少し上にある<% if:list_category_article -%>を探してみてください。

<div class="row">
<% loop:list_category_article %>
<div class="col-lg-1-5 col-md-1-5 col-sm-4 col-xs-6">
    <div><a href="<% article.page_url %>"><img class="img-responsive" src="<% if:article.first_image %><% article.first_image.page_url_thumbnail %><% else %>[NoImage画像のパス]<% /if:article.first_image %>"></a></div>
    <div><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></div>
</div>
<% /loop %>
</div>

以上ですべての変更は完了です。