【Cocoon】チェックリストカスタマイズ

チェックリスト(灰色)

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力
Cocoon Child: スタイルシート(style.css)に追加
.check-list-gray{
list-style: none;
padding:0;
margin:0;
}
.check-list-gray li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
}
.check-list-gray li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a"; /* fa-check-square-o */
color: #949495;
position: absolute;
left:0;
}
AddQuicktagプラグインに追加
<ul class="check-list-gray">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>

チェックリスト(黄色)

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

Cocoon Child: スタイルシート(style.css)に追加

.check-list-yellow{
list-style: none;
padding:0;
margin:0;
}
.check-list-yellow li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
}
.check-list-yellow li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a"; /* fa-check-square-o */
color: #ffd900;
position: absolute;
left:0;
}
AddQuicktagプラグインに追加
<ul class="check-list-yellow">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>

チェックリスト(赤色)

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力
Cocoon Child: スタイルシート(style.css)に追加
.check-list-red{
list-style: none;
padding:0;
margin:0;
}
.check-list-red li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
}
.check-list-red li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a"; /* fa-check-square-o */
color: #e60033;
position: absolute;
left:0;
}
AddQuicktagプラグインに追加
<ul class="check-list-red">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>

チェックリスト(青色)

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力
Cocoon Child: スタイルシート(style.css)に追加
.check-list-blue{
list-style: none;
padding:0;
margin:0;
}
.check-list-blue li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
}
.check-list-blue li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a"; /* fa-check-square-o */
color: #0095d9;
position: absolute;
left:0;
}
AddQuicktagプラグインに追加
<ul class="check-list-blue">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>

チェックリスト(緑色)

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力
Cocoon Child: スタイルシート(style.css)に追加
.check-list-green{
list-style: none;
padding:0;
margin:0;
}
.check-list-green li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
}
.check-list-green li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a"; /* fa-check-square-o */
color: #3eb370;
position: absolute;
left:0;
}
AddQuicktagプラグインに追加
<ul class="check-list-green">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>

タイトルとURLをコピーしました