自社サービス
CryptoHunter
日本初・NFT/クリプトネイティブのIPから派生したトレーディングカード・ボードゲーム
Creacity
商用利用可能の建築イラスト素材サイト
自分がよく使うSWELLのカスタムCSS
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%;
}
}
スマホグローバルナビゲーションをカスタマイズ（PCと異なるメニューに）する
あわせて読みたい
SWELLでスマホグローバルナビゲーションをカスタマイズ（PCと異なるメニューに）する方法 【 スマホでのグローバルナビゲーションが長すぎ問題】 Webサイトにおいて、グローバルナビゲーションの階層が多すぎると、スマホで閲覧する際に、下記の様にスマホのハ…
