Blogger・QooQの人気の投稿ガジェットをCSSで整える

Blogger のウィジェット ver.1 では、人気の投稿ガジェットにスニペットを表示させると、デザインが崩れたような表示になってしまいます。これは同 ver. の QooQ でも見られることで、サムネイル画像を回り込んでタイトルとスニペットが表示される仕様が原因。
これを整えて表示させるにはいくつかの方法がありますが、ここでは「 flex 」を使った方法を紹介します。

blogger-qooq

人気の投稿ガジェットを flex で整える

人気の投稿ガジェットにスニペットを表示させた場合、画像のようにサムネイルの下から始まるようにします。同時にスニペットの文字サイズも調整します。

blogger-widget-snippet

下記の CSS は他のガジェットと被らないように、最初に設置した人気の投稿ガジェット「 #PopularPosts1 」に限定した記述にしています。
#PopularPosts1 .item-content {
    display: flex;
    flex-wrap: wrap;
}

#PopularPosts1 .item-snippet {
    font-size: 12px;
}

#PopularPosts1 .item-title {
    flex-basis: 70%;
}
item-content は、スニペットを表示させた場合に生成されるクラスなので、スニペットを表示しない場合はこの flex 指定は無視されます。また、デフォルトでは投稿タイトルとスニペットの文字サイズが同じなので、item-snippet でスニペット用のサイズを指定しています。
タイトルの横幅を 70%にしていますが、サムネイル画像のデフォルトサイズに合わせたものです。

ラムネグ