2月14日にWordPress 可変するテキストの文字数に注意と題して、文字が増えた場合の対応のお話をさせていただきました。この時には見落としていたのですが、文字が少ない場合の対応も考えておかなくてはいけませんでした。例えば、タイトルや抜粋の文字が少ない場合、下記のように日付にmargin-topでコードを書いていたため、上に上がってしまい、デザインが崩れてしまっています。

日付が上がってしまい、デザインが崩れています

対策として親要素(例 クラス名 news-item)にposition: relative;をつけて、子要素の日付のクラス(例 クラス名 news-item-date)にposition: absolute;と bottom: 0;等をつけることで対応できます。これで、文字の大きさに関係なく、日付は下に固定できるようになりました。基本的なことですが、最初の静的なサイトの作成時に意識しておかなくてはいけないことでした。

文字数に関係なく、日付が下に固定できるようになりました