QooQの投稿ヘッダーアイテムの順番をCSSで入れ替える

Blogger のテンプレートとして人気のある ラムネグ さんの「 QooQ 」。投稿ヘッダーにあるタイトルやラベルなどの並び順は、CSS で自由に入れ替えることができます。
中央寄せなどはもちろん、通常はタイトル下に位置する日付を最上部に表示させたりすることが可能です。

QooQ-post-header

アイテムを入れ替える下準備

投稿ヘッダーには、タイトル、日付、ラベル、SNS ボタンの 4つのアイテムがあり、これらの並び順を変更するために、まず下準備として以下の CSS を追加します。

アイテムの並び順を変更できるよう親要素に「 flex 」を指定し、表示位置がバラバラなアイテムすべてを、一度左寄せに統一します。
#single-header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}
align-items の値に以下を指定。ここでは例として左寄せにしているだけなので、中央寄せでも構いません。

左寄せflex-start
中央寄せcenter
右寄せflex-end

アイテムの並び順を指定する

次に並び順を変更するための CSS を追加します。
ヘッダーにあるアイテムに「 order 」のプロパティを使用し、アイテムそれぞれに何番目に位置させるかを指定します。
#single-header-title {order: 1;}
#single-header-date {order: 2;}
#single-header-category {order: 3;}
#single-header .single-share {order: 4;}
・投稿タイトル
・日付
・ラベル
・SNS ボタン

上記 CSS はデフォルトの並び順にしてあります。
最上部に位置させたいアイテムの値に「 1 」を指定し、他のアイテムにも順番を指定します。これだけで表示上の並び順が変わります。

また、アイテムにはデフォルトで余白が指定されているものがあります。アイテム間の余白調整が必要になると思うので、その場合は対象となるアイテムに「 margin 」を追加するなどして調整してください。

アイテムの位置を個別に変更する

特定のアイテムだけ右寄せ、あるいは左寄せにしたい場合は、CSS に「 align-self 」のプロパティを追加して位置を上書きします。

例えば、ラベルだけを右寄せにしたい場合は下記のようにします。
#single-header-category {
    align-self: flex-end;
    order: 3;
}
align-self の値に以下を指定。

左寄せflex-start
中央寄せcenter
右寄せflex-end


ラムネグ