記事の一覧表示時にサムネイルと概要を表示する

通常、ブログの記事は本文がそのまま表示されています。




短い記事ならそれでもよいのですが、長文の記事が続く場合、もっとスマートにまとめたい、ということもあると思います。

そこで、当ブログでは一覧表示時にはサムネイルと記事序文のみを表示するようにしました。


※※注意！※※
テンプレートの編集を行う前には、必ずテンプレートのバックアップを行ってください！

includable要素を変更

まずは、テンプレートの中から以下の要素を検索します。



見つかりましたら、その要素が格納されているdiv要素の下に、以下のように追加します。

javascriptを埋め込む

次に、javascriptで以下のコードを組み込みます。

cssを追加する

最後に、cssでサムネイル表示部とテキスト表示部の外観を整えます。






サムネイル画像のアスペクト比調整など課題はありますが、ひとまずは以上でリスト表示は可能になりました。