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

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

1. カスタム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>

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

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

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

結局、元に戻しました。

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

こちらもどうぞ。

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

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

chiilabo.com

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

Youtubeの「チャンネル登録お願いします」を参考に、ブログの記事下に「LINE登録」ボタンを追加してみました。 ついでに、LINE公式のあいさつメッセージにも、タイムラインの見方を画像で説明するようにしました。 LINEのあいさつメッセージには、画像を追加することができます。 少しでもリピートにつながれば嬉しいです。 こちらもどうぞ。

chiilabo.com

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

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。 ウィジェットとしてPHPコードを実行したいと思います。 追記（2024-07-20） 任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。 カスタムHTMLではPHPコードは実行できない まず試したのがウィジェットの「カスタムHTML」です。 しかし、「<?」で始まるタグはエラーになってしまいます。 Special characters mus...

chiilabo.com

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