JINカスタマイズ｜アイコンボックスのデザイン

2018年10月31日のアップデートで追加されたアイコンボックスをカスタマイズします。

アイコンボックスは16種類用意されています。

/*iconbox*/
.jin-iconbox {
padding: 15px 20px 15px 0px;
margin: 20px 0;
border-radius: 0px;
}
.jin-iconbox-main {
padding-top: 5px;
padding-bottom: 5px;
}
.jin-iconbox-icons {
min-width: 60px;
width: 60px;
text-align: center;
padding: 0;
}
.cps-post-main .blue-iconbox ul > li:before, .cps-post-main .blue-iconbox ol > li:before {
background-color: #46BC63!important;
}
.jin-iconbox-icons .fa-info-circle.jin-icons, .jin-iconbox-icons .fa-cog.jin-icons, .jin-iconbox-icons .fa-wrench.jin-icons, .jin-iconbox-icons .fa-file-alt.jin-icons, .jin-iconbox-icons .fa-file.jin-icons, .jin-iconbox-icons .fa-clipboard.jin-icons, .jin-iconbox-icons .fa-envelope.jin-icons, .jin-iconbox-icons .fa-folder.jin-icons, .jin-iconbox-icons .fa-thumbs-up.jin-icons, .jin-iconbox-icons .fa-folder-open.jin-icons {
color: #46BC63;
}
.blue--border {
border-left: 2px dashed #46BC6361;
}
.blue-iconbox {
background: #F4FBF6;
}
/*red*/
.cps-post-main .red-iconbox ul > li:before, .cps-post-main .red-iconbox ol > li:before {
background-color: #ff5959!important;
}
.jin-iconbox-icons .fa-question.jin-icons, .jin-iconbox-icons .fa-question-circle.jin-icons, .jin-iconbox-icons .fa-flag.jin-icons, .jin-iconbox-icons .fa-thumbs-down.jin-icons, .jin-iconbox-icons .fa-heart.jin-icons {
color: #ff5959;
}
.red--border {
border-left: 2px dashed #ff595961;
}
.red-iconbox {
background: #FFF7F7;
}

/*iconbox*/
.jin-iconbox {
padding: 15px 20px 15px 0px;
margin: 20px 0;
border-radius: 0px;
}
.jin-iconbox-main {
padding-top: 5px;
padding-bottom: 5px;
}
.jin-iconbox-icons {
min-width: 60px;
width: 60px;
text-align: center;
padding: 0;
}
.cps-post-main .blue-iconbox ul > li:before, .cps-post-main .blue-iconbox ol > li:before {
background-color: #46BC63!important;
}
.jin-iconbox-icons .fa-info-circle.jin-icons, .jin-iconbox-icons .fa-cog.jin-icons, .jin-iconbox-icons .fa-wrench.jin-icons, .jin-iconbox-icons .fa-file-alt.jin-icons, .jin-iconbox-icons .fa-file.jin-icons, .jin-iconbox-icons .fa-clipboard.jin-icons, .jin-iconbox-icons .fa-envelope.jin-icons, .jin-iconbox-icons .fa-folder.jin-icons, .jin-iconbox-icons .fa-thumbs-up.jin-icons, .jin-iconbox-icons .fa-folder-open.jin-icons {
color:white;
}
.blue--border {
border-left: none;
}
.blue-iconbox {
background:linear-gradient(90deg,#2BB24C 0%,#2BB24C 60px,#F4FBF6 60px,#F4FBF6 100%);
}
/*red*/
.cps-post-main .red-iconbox ul > li:before, .cps-post-main .red-iconbox ol > li:before {
background-color: #ff5959!important;
}
.jin-iconbox-icons .fa-question.jin-icons, .jin-iconbox-icons .fa-question-circle.jin-icons, .jin-iconbox-icons .fa-flag.jin-icons, .jin-iconbox-icons .fa-thumbs-down.jin-icons, .jin-iconbox-icons .fa-heart.jin-icons {
color:white;
}
.red--border {
border-left: none;
}
.red-iconbox {
background:linear-gradient(90deg,#ff5959 0%,#ff5959 60px,#FFF7F7 60px,#FFF7F7 100%);
}

.jin-iconbox ul, .jin-iconbox ol {
padding-left: 0;
}
.jin-iconbox ul:not([class]) li:before {
top: 0.4em;
}
.jin-iconbox ul:not([class]) li:before {
left: 7px;
}
.jin-iconbox ol > li {
padding: 0em 0px 0em 27px;
margin-bottom: 1.2em;
}
@media (max-width: 767px){
.jin-iconbox ol > li:after {
top: 1.02em;
}
.jin-iconbox ol > li:before {
top: 0px;
}}
@media (min-width: 768px){
.jin-iconbox ol > li:before {
top: 0px;
}
.jin-iconbox ol > li:after {
top: 1.02em;
}}

ここにボックスタイトルを入力

JINのカスタマイズまとめページ

 

for men

for men｜やってみるをサポート