[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。

まず、メイン全体の余白（padding）をなくしてから、記事要素に余白（margin）を追加しました。

/** モバイルサイトでアイキャッチの写真を横一面にする*/

@media screen and (max-width: 1023px) {
	main.main {
		padding-right:0px;
		padding-left:0px;
	}
	.entry-content, .entry-footer, .under-entry-content{
		margin-right:16px;
		margin-left:16px;
	}
	.article .entry-title {
		padding-right:16px;
		padding-left:16px;
	}
	.eye-catch img {
		border-color: transparent;
	}
}

タイトル文のh1要素にも、余白（padding）を設定しています。PCで横幅を狭めて表示した場合は、ちゃんと余白が入っているのですが、AndroidのChromeではうまく表示されません。

ブラウザ依存なのでしょうか？要検討ですね。

こちらもどうぞ

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

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。 今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。 これもnoteのデザインを参考にしています。 タイトルと本文の位置が近くなるので、読みやすいですよね。 Cocoon設定やPHP編集もいいけれど…… アイキャッチ位置を変更する方法をざっと調べると… Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更す...

chiilabo.com

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。 ビフォー・アフターを比べる 元のデザインがこれで ちょっとラベルボックスに比べると間延びしている気がします。 こんなふうにしました。 ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。 Cocoonのラベルボックスのいいところ 記事の中のポイントが目立って、読みやすいことです。 Cocoo...

chiilabo.com

CSSのクラス指定の空白の意味 知っていますか？子孫結合子と除外の方法

CSSのクラス指定が複雑になったときの意味を調べてみました。 散々、迷って出来上がったCSSのコードは以下です。 .article :not(div.toc-content) li { font-size: 115%; font-weight: 600; } 意図としては、「記事（.articleクラス）の中のリスト項目のフォントサイズを大きくする、ただし、目次（toc-contentクラス）のリスト項目のフォントサイズは大きくしない」です。 これは3つの要素が組み合わせてあ...

chiilabo.com

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