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

記事一覧カードのデザインをシンプルにする

クラゲ社長

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;
}

まとめ

前から気になっていたアイキャッチに重なって表示されるカテゴリーと、タイトルの表示位置を調整してみた。

また、タイトルの文字サイズが大きくぼってりしていたので、サイズを縮小して色を少し濃くしてみた。

クラゲ社長

モノクロカラーやシンプルなデザインにしているブログとはとても相性が良いね!

コメントを残す

メールアドレスが公開されることはありません。