目次

【アメブロカスタマイズ】リスト型トップページで各記事の本文を複数行表示する方法

アメブロの新CSS編集用デザインの「リスト型(タイムライン型)」のトップページでは、各記事の本文の内容が1行だけ表示されます。

しかし、記事冒頭の1行だけ表示されたのでは、挨拶だけで終わってしまうなど、あまり意味が無い場合も多く、せめて2行~3行くらいは表示できればと思う方も多いのではないでしょうか。

そこで、当記事では、「リスト型(タイムライン型)」のトップページで、各記事の本文の内容を2行以上表示するカスタマイズ方法をご紹介します。

カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先にチェックしておいて下さい。

リスト型(タイムライン型)トップページで各記事の本文を複数行表示する

リスト型(タイムライン型)トップページで本文を複数行表示するには、CSSの末尾に以下のコードを追加してみてください。

/* リスト型トップページの本文表示行数 */
.skin-timelineItem ul li h2+p {
  white-space: normal;
  overflow: hidden;
  line-height: 1.5;
  height: 4.5em; /* line-height × 表示行数 em */
}

このコードは、冒頭の画像のように3行表示する方法です。

表示行数を変えたい場合は、注釈コメントにも書いてあるように、「height」の値として「line-height」×「表示行数」に単位「em」を付けた値を設定します。

もし、一行が専有する高さを「line-height」で変更した場合は、それに合わせて「height」の値も変更して下さい。

なお、この方法で複数行表示にすると、本文の内容表示の最後が「・・・」になりません。

また、トップページだけでなく、トップページからページ送りした2ページ目など、同様の形式で表示されるページも同じ行数表示になります。

まとめ

以上、新CSS編集用デザインの「リスト型(タイムライン型)」のトップページで、各記事の本文の内容を複数行表示するカスタマイズ方法をご紹介しました。

もしよかったら、参考にして下さい。