自分がよく使うSWELLのカスタムCSS

2021年11月18日2022年5月8日

PCでタブの横並びの数を変更

最大4つ並びから5つ並びに変更した場合
デフォルトは25%なので、ここを20%に変更

@media screen and (min-width:960px) {
 .c-tabList__item {
    width: 20%!important;
}
}

コンテンツとフッターの間のスペースを無くす

.l-content{
	margin-bottom:0;
}

コンテンツとヘッターの間のスペースを無くす

トップページのみの場合は l-content の記載だけで十分です

.l-content{padding-top:0;}
#breadcrumb{display:none;}

Contact Form 7 のデザインを整う

ボーダーのカラーを深い青紫（#28385e）にした場合です
色を変える場合は色のコードを変えてください

.wpforms-submit{
	width:100%!important;
}

.wpcf7-form input:not([type="checkbox"]),
.wpcf7-form textarea{
	width:100%;
	border:1px solid #28385e;
	margin-bottom:20px!important;
}
.wpcf7-list-item{
	margin-bottom:20px!important;
}
.is-style-border>.swell-block-accordion__item{
	border:1px solid #28385e;
}

投稿リストのカスタマイズ

一番外側から囲んでる部分を「.block-white」にしています。
投稿リスト：リスト型の画像部分をもっと小さくして文章部分をもっと大きくすることを目的としています。
PCだけの見た目なのでメディアクエリーで768px以上にし、更に指定したブロックの中だけ範囲限定する事で他のヶ所への影響を防ぎます

@media screen and (min-width:768px) {
.block-white{
	background:#fdfdfd;
	padding:4em 8em 4em 8em;
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .2);
	border-radius:15px !important;
}
.block-white .p-postList__link{
	height:100px;
	border-bottom:solid 1px #efefef;
}
.block-white .p-postList__thumb{
	height:100px;
	width:160px;
}
.block-white .-type-list .p-postList__body, .block-white .-type-list2 .p-postList__body{
	width:72%;
}
}