コピペで完了！Cocoonのアイキャッチ画像を記事タイトルの上に移動する方法

WordPressテーマでCocoonを使っている場合に、アイキャッチ画像を記事タイトルの上に移動する方法を説明します。

手順

1. WordPress 管理画面にアクセスする
2. 【外観】→【テーマファイルエディター】→【style.css】をクリックする
   ※親テーマではなく子テーマで作業します
3. 以下のコードをコピペして張り付ける
4. 「ファイル更新」をクリックする

アイキャッチ画像を記事タイトルの上に移動するカスタマイズCSS用コード

/************************************
** アイキャッチ画像を記事タイトルの上に移動
************************************/

/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*IE対策はみ出し部分を非表示*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

まとめ

固定ページを使って、会社用のHP（ホームページ）やLP（ランディングページ）を作るときに、アイキャッチ画像をページタイトルの下に移動させたいときに便利です。