スポンサーリンク
スポンサーリンク

note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

ニッチな話題ホームページ運用

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。

今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。

これもnoteのデザインを参考にしています。

タイトルと本文の位置が近くなるので、読みやすいですよね。

スポンサーリンク

Cocoon設定やPHP編集もいいけれど……

アイキャッチ位置を変更する方法をざっと調べると…

  1. Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法
  2. content.phpを書き換えて表示位置を変更する方法

が紹介されていました。

今回は、アイキャッチをタイトルの「上」に変更したいので(1)の「本文中に画像挿入する方法」は使えません。

(2)のphpのソースをいじってもよいのですが、サイトのデザインに関することはなるべくスタイルシートで解決したいもの。

画像の位置は、本質的には内容の変更ではないですよね。

スタイル display flex で順序を変える

「CSS 順序 変更」で調べてみると、「display:flex」という方法でできることがわかりました。

まず、タイトルとアイキャッチの構造を見てみましょう。

  • .entry-header
    • .entry-title
    • .eye-catch-wrap
    • .date-tags

「entry-header」の中に、3つの要素が並列になっています。

display:flexとorder

まずは、display: flexにして、順序を変更します。

.entry-header {
	display: flex;
}
.entry-header .entry-title {
	order: 2;
}
.entry-header .eye-catch-wrap {
	order: 1;
}
.entry-header .date-tags {
	order: 3;
}

すると、こうなります。

あれれ? 横方向に並んでしまいました。

flex-directionを忘れずに

display:flexには、方向の指定があります。初期値では横行(row)だったなので、flex-directionを縦列(column)に変更します。

.entry-header {
	display: flex;
	flex-direction: column;
}

できたものがこちら。

.entry-header {
	display: flex;
	flex-direction: column;
}

.entry-header .eye-catch-wrap {
	order: 1;
}
.entry-header .entry-title {
	order: 2;
}

.entry-header .date-tags {
	order: 3;
}

お疲れさまでした。

QRコードを読み込むと、関連記事を確認できます。
note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】
タイトルとURLをコピーしました