リスト型(タイムライン型)トップページで本文を複数行表示するカスタマイズ方法

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

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

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

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

カスタマイズは、ブログデザインCSSの編集で行います。

もしも、このやり方がわからない場合は先にチェックしておいて下さい。

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

→2017/07/12追記:CSSを、変更が心配されるアメブロの独自属性「data-uranus-?」等を使わないコードに修正しました。ただし、HTML構造の変更やユーザーが触れないCSSの変更もありますので、その影響が出る可能性もあります。

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

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

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

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

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

まとめ

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

もしよかったら、当記事を参考にしてやってみて下さい。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。