記事一覧カードデザインをシンプルにする【SANGOカスタマイズ】

2019年4月25日2021年12月23日

クラゲ社長

SANGOトップページの記事一覧カードデザインをシンプルなデザインに変更したよ！

PC表示 Before

PC表示 After

PC表示の変更点

アイキャッチのすぐ下にタイトルを配置
タイトルの文字サイズを縮小・カラー変更
カテゴリーと投稿日のデザインを統一・配置を変更

スマホ表示 Before

スマホ表示 After

スマホ表示の変更点

NEWマークのサイズを縮小
タイトルを一番上に配置

注意

環境によってはデザインが崩れたりする場合があります。

カスタマイズコードをスタイルシートにコピペする

WP管理画面の「外観→テーマ編集→スタイルシート（style.css）」に下記のコードをコピペする。

コード

/*--------------------------------------
記事一覧デザイン
--------------------------------------*/
/*PC通常カードタイプ*/
.cardtype h2 {/*タイトル*/
	padding-bottom: 8px;
	font-size: 15px;
	color: #353535;
}
@media screen and (min-width: 480px) and (max-width: 1029px){
.cardtype h2 {
	padding-bottom: 15px;
}
}
.cardtype time {/*投稿日*/
	position: absolute;
	bottom: 0px;
}
.cardtype time:before {/*投稿日アイコン*/
	display: none;
}
.cat-name {/*カテゴリー表示*/
	background: none !important;
	color: #b5b5b5;
	right: 5px;
	bottom: 8px;
	top: initial;
	left: initial;
	border-radius: initial;
}
@media screen and (max-width: 800px){
.cat-name{
	display: none;
}
}

/*スマホ横長カードタイプ*/
.sidelong time {/*投稿日*/
	position: absolute;
	bottom: 3px;
}
.sidelong h2 {/*タイトル*/
	height: 6em;
}
.sidelong .newmark {/*NEWマーク調整*/
	height: 25px;
	line-height: 25px;
	border-radius: 3px;
}