WordPressのテーマ「Cocoon」で
「記事タイトル」と「アイキャッチ画像」の順番を変更する方法です。
(「アイキャッチ画像」を記事の最上部に位置変更する方法です。)
編集場所
「CSS」で編集します。
外観 → テーマファイルエディター → Cocoon Child → スタイルシート
CSS編集内容
.article-header {
display: flex;
flex-direction: column;
}
.eye-catch-wrap {
order: -1;
}
編集内容説明
.article-header
記事のヘッダー部分のセレクタです。
(ブログ全体のヘッダーではない)
「記事タイトル」「アイキャッチ画像」「日付」「SNS」など、
本文より上のグループです。
私の記事では設定で「SNS」を消してあります。
display: flex;
セレクタ(親要素)をフレックスボックス(Flexbox)にします。
今回の場合、記事ヘッダー部分。
フレックスボックスは子要素の配置や順番を容易に実現できる様式です。
flex-direction: column;
フレックスボックスはデフォルトでは「横並び」になるので「縦並び」に設定します。
.eye-catch-wrap
「アイキャッチ画像」のセレクタです。
order: -1;
順番を指定して、
「アイキャッチ画像」を最上部に位置変更しています。
補足
order: -1;
フレックスボックスを実装すると全ての子要素に『 order : 0 ; 』が設定される。
今回の場合、記事ヘッダー部分の「記事タイトル」「アイキャッチ画像」「日付」「SNS」など。
設定された数値が低い要素を前に配置する。横の場合は「左」、縦の場合は「上」。
高い数値を設定すれば後ろに配置される。
「アイキャッチ画像」に『 -1 』を設定することで他の要素より前に配置される。
縦方向なので「上」に配置される。
「アイキャッチ画像」を上に配置する書き方ではなく、
「記事タイトル」を「アイキャッチ画像」の下に配置する書き方をしようと
セレクタを「記事タイトル」に変え、『 order : 1 ; 』を設定すると
「記事タイトル」はヘッダー内の一番下に配置され、「アイキャッチ画像」だけではなく
「日付」「SNS」などの下に配置される。
余談
WordPressのテーマ「Cocoon」では、
「記事タイトル」→「アイキャッチ画像」の順番がデフォルトです。
「記事タイトル」→「アイキャッチ画像」→「内容」の順番です。
「記事タイトル」の文章と「内容」の文章の間に画像が入るのは記事を読む上で
テンポが悪い気がしたので「アイキャッチ画像」を最上部に配置したいと思い
位置変更しました。
コメント