テキストテキストテキストテキストテキストテキストテキスト
- リスト
- リスト
- リスト
パターン2
テキストテキストテキストテキストテキストテキストテキスト
- リスト
- リスト
- リスト
パターン3
テキストテキストテキストテキストテキストテキストテキスト
- リスト
- リスト
- リスト
構造詳細
クラス名
bf-group-sp--blackboardクラス名（タイトル）
bf-group-sp--blackboard__titleCSS
.bf-group-sp--blackboard {
border: 16px solid;
padding: 1.5rem;
position: relative;
}
.bf-group-sp--blackboard .wp-block-group__inner-container {
color: #fff;
}
.bf-group-sp--blackboard:before,
.bf-group-sp--blackboard:after ,
.bf-group-sp--blackboard .wp-block-group__inner-container:before,
.bf-group-sp--blackboard .wp-block-group__inner-container:after {
display: inline-block;
position: absolute;
content: "";
}
.bf-group-sp--blackboard:before {
right: 10px;
bottom: 15px;
width: 52px;
height: 8px;
border-radius: 2px 2px 0 0;
background: linear-gradient(90deg, #d69f54 43%, #333333 43%, #333333 57%, #d69f54 57%);
}
.bf-group-sp--blackboard:after {
right: 11px;
bottom: 0px;
width: 50px;
height: 15px;
border-radius: 0 0 4px 4px;
background: #294988;
}
.bf-group-sp--blackboard .wp-block-group__inner-container:before {
right: 71px;
bottom: 0px;
width: 48px;
height: 8px;
background: white;
}
.bf-group-sp--blackboard .wp-block-group__inner-container:after {
right: 98px;
bottom: 8px;
width: 48px;
height: 8px;
background: #fcd04f;
transform: rotate(-20deg);
}使い方
導入方法
- コピーボタンをクリック
- 投稿画面（エディタ）で右クリックしてプレーンテキストとして貼り付け
ー動画（予定）ー
オリジナルスタイルのルール
クラス名の付け方
- 原則として使用するクラス名は1つとする
- クラス名からは役割がわかるものとする
- クラス名からはデザインのイメージがわかるものとする
- 接頭語はbf-とする
- デザインを意味する部分は–で繋ぐ
- 詳細度は高め（ただしbodyなど広範囲に影響するのはNG）
CSSの書き方
- 余白の値はできるだけremまたはpx
- デフォルトカラー（うすめ）は#eee
- デフォルトカラー（こいめ）は#333
- colorとbackgroundは色設定から変更できることを頭に入れておく
- 疑似要素をテキストの後ろにしたい場合は、親にzindex 0、疑似要素にzindex -1にしておく
- importantは最低限なら使ってもいいと思う
