QooQのアイキャッチ画像を投稿タイトルの上に移動させる

QooQ のページ表示は、投稿タイトル類の下から投稿内容が表示されるオーソドックスなものですが、アイキャッチ画像をページの先頭に表示させて、より画像に目を惹かせることができます。
画像の表示位置を変えるには CSS の追加だけで可能。画面上での表示のしかたを変えるだけなので、HTML コードに変更を加える必要はありません。

blogger-qooq-eyecatch

アイキャッチ画像の位置を先頭に

以下の CSS を追加するだけで、アイキャッチ画像がページ最上部に表示されます。
ここでアイキャッチとなるのは、投稿内にエディタで貼り付けた最初にある画像です。
#single {
    display: flex;
    flex-direction: column;
}

#single-content {
    display: contents;
}

.separator:first-child {
    margin-bottom: 1em;
    order: -1;
}

各 CSS の説明

■ #single(コンテンツ部)
親要素となるコンテンツに「 flex 」を指定。これでコンテンツ内にある子要素の並び順を変えることが可能に。
flex のデフォルトは子要素のヨコ並びなので、通常表示と同じタテ並びになるように「 column 」を指定。

■ #single-content(投稿部)
投稿部分はひとつの子要素になっているので、画像とテキスト部分を分けるための指定をします。

■ .separator:first-child(投稿画像部)
アイキャッチになる画像の指定。ページ内の投稿画像は毎回 1つとは限らないので、擬似クラスにして最初の画像だけをアイキャッチの対象にします。
アイキャッチの表示位置を 「 order 」で指定します。何も指定していない子要素の位置は「 0 」となるので、それよりも小さい値の「 -1 」を指定して先頭に位置するようにします。

投稿のしかた

投稿は通常通りに行います。
投稿エディタに最初に貼り付けた画像がページ最上部に表示される、ということだけ覚えておけば問題ないでしょう。

ラムネグ