AFFINGER5

【AFFINGER5】トップページの記事一覧をカード型にするカスタマイズ【WING】

こんにちは。マーク(@marklog0323)です。

WordPressテーマ「WING(AFFINGER5)」のトップページの記事一覧をカード型(カードスタイル)にするカスタマイズを紹介します。

よく見る「カテゴリ一覧」のショートコードを組み合わせる、それっぽく見えるやつじゃなくて、普通にCSSを追記してカード型にします。

はじめに

カード型にする方法はいくつかありますが、今回紹介するのはCSSを追記してカード型にする方法です。

記事のタイトルは「トップページの」になってますが、カテゴリーページと検索結果ページもカード型になります。

「JET」、EX版との互換性はない

▲有料の子テーマ「JET」

記事一覧をカード型にできる有料の子テーマ「JET」や、有料のアップグレード版「AFFINGER5EX」とは違う方法でカード型にしているので、「JET」やEX版との互換性はありません。

もちろん、「JET」やEX版の機能もありません。あくまで、記事一覧をカード型にするだけです。

使えなくなる可能性がある

「AFFINGER5」本体のアップデートに伴い、使えなくなる可能性があります。

使えなくなった場合は、この記事を更新するつもりではありますが、記事の更新を約束するものではありません。

カード型にする方法

下記のCSSを、スタイルシートの最後にコピペします。

 css
/* 記事一覧をカード型にする */
.home main,
.archive main,
.search main {
	background-color: transparent;
}
.home main .kanren,
.archive main .kanren,
.search main .kanren {
	display: flex;
	flex-wrap: wrap;
}
.home main .kanren dl,
.archive main .kanren dl,
.search main .kanren dl {
	width: calc(50% - 10px);
	background-color: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}
.home main .kanren dl:nth-of-type(odd),
.archive main .kanren dl:nth-of-type(odd),
.search main .kanren dl:nth-of-type(odd) {
	margin-right: 10px;
}
.home main .kanren dl:nth-of-type(even),
.archive main .kanren dl:nth-of-type(even),
.search main .kanren dl:nth-of-type(even) {
	margin-left: 10px;
}
.home main .kanren dt,
.archive main .kanren dt,
.search main .kanren dt {
	float: none;
	width: auto;
}
.home main .kanren dt img,
.archive main .kanren dt img,
.search main .kanren dt img {
	width: 100%;
}
.home main .kanren dd,
.archive main .kanren dd,
.search main .kanren dd {
	padding: 10px 20px 0;
}
@media print, screen and (max-width: 599px) {
	.home main .kanren dl,
	.archive main .kanren dl,
	.search main .kanren dl {
		width: calc(50% - 5px);
	}
	.home main .kanren dl:nth-of-type(odd),
	.archive main .kanren dl:nth-of-type(odd),
	.search main .kanren dl:nth-of-type(odd) {
		margin-right: 5px;
	}
	.home main .kanren dl:nth-of-type(even),
	.archive main .kanren dl:nth-of-type(even),
	.search main .kanren dl:nth-of-type(even) {
		margin-left: 5px;
	}
	.home main .kanren dd,
	.archive main .kanren dd,
	.search main .kanren dd {
		padding: 10px 10px 0;
	}
}

スタイルシートの場所は、WordPress管理画面の左側メニュー「外観」→「テーマエディター」です。

「AFFINGER5」本体のアップデートで消えないように、子テーマを導入して、子テーマのスタイルシートに追記するのがいいでしょう。

カードのデザインは「AFFINGER5」のカードスタイルのブログカードに合わせています。

アイキャッチの高さを揃える方法

アイキャッチ画像のサイズは、カードの横幅に合わせる記述になっています。

画像のアスペクト比を統一する

アイキャッチに設定する画像のアスペクト比を、アップロード前に統一して、WordPress管理画面の左側メニュー「AFFINGER5 管理」→「デザイン」→サムネイル画像設定を「フルサイズにする」にします。

アスペクト比は16:9を想定しています。

サムネイルのサイズを変更して揃える

WordPress管理画面の左側メニュー「設定」→「メディア」→サムネイルのサイズを任意のサイズ(320×180など)に変更して、「AFFINGER5 管理」→「デザイン」→サムネイル画像設定を「メディア設定にする」にします。

サムネイルのサイズの変更は、すでにアップロードしている画像には適用されません。

プラグイン「Regenerate Thumbnails」などを使うことで、画像を一括で再アップロードすることができます。その場合、変更前のサムネイルサイズの画像が表示されなくなるので注意しましょう。

-AFFINGER5