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

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

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

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

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

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

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

が紹介されていました。

例えば、こちらを参考にしました。

Cocoonの本文上のアイキャッチの位置を変更するカスタマイズ

WordPressテーマのCocoonの本文上に表示されるアイキャッチのサムネイル画像の位置を変更するカスタマイズの解説です。

mycus-tom.com

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

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

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

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

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

こちらを参考にしました。

要素の順番を入れ替えられるflexboxのorderを活用しよう

Flexboxはスマートフォン用のCSSに適用させる レスポンシブサイトを作る時に便利なFlexbox・・・非…

www.attend.jp

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

「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;
}

すると、こうなります。

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

4. flex-directionを忘れずに

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

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

その他のプロパティについては

日本語対応！CSS Flexboxのチートシートを作ったので配布します

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており

www.webcreatorbox.com

5. できたものがこちら。

.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;
}

お疲れさまでした。

こちらもどうぞ。

note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインは モバイルメニューです。 どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。 モバイルメニューボタンをいろいろ変更した 上部バーはすっきりさせました。 下部バーはLINE...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。