[CSS] ブログの記事一覧をInstagramっぽくしたい（いったん断念）

ひとこと日記のアイキャッチ画像を、Instagramのように大きく表示できるようにしたいと思いました。

カスタムHTMLウィジェットでスタイル設定

カスタムHTMLのウィジェットで、styleを追加すると、特定のページにスタイルを追加できました。

<style>

.entry-card-snippet {
   display: none;
}
figure.entry-card-thumb {
    padding-bottom: 0em;
}
	.entry-card-thumb {
		width: 100% !important; 
	}
	
	article.entry-card {
    display: block;
    flex-direction: column;
		border: 3px solid;
		border-color: #fec;
		border-radius: 6px;
		padding: 6px;
}

	.entry-card-title {
		display:none;
	}
</style>

要素を非表示にしたり、幅を変えることで、アイキャッチ画像を大きく一覧にできました。

問題点：カテゴリー一覧がすべてスタイルが変わってしまった

ただし、問題点が……。
ほかのカテゴリー一覧も同じスタイルになってしまったのです。

結局、元に戻しました。

ウィジェットの表示・非表示設定で、特定のカテゴリー一覧だけに表示できるか、要検討。

こちらもどうぞ。

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

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイ...

chiilabo.com

試しに記事下にLINE登録ボタンをつけてみた

Youtubeの「チャンネル登録お願いします」を参考に、ブログの記事下に「LINE登録」ボタンを追加してみました。ついでに、LINE公式のあいさつメッセージにも、タイムラインの見方を画像で説明するようにしました。...

chiilabo.com

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。ウィジェットとしてPHPコードを実行したいと思います。カスタムHTMLではPHPコードは実行できないまず試した...

chiilabo.com

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