グループブロック｜スペシャル（ホワイトボード）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

パターン2

パターン3

構造詳細

クラス名

bf-group-sp--whiteboard

クラス名（タイトル）

bf-group-simple--__title

CSS

.bf-group-sp--whiteboard {
    position: relative;
    padding: 1.5rem 1.5rem 2rem;
    border: 10px solid transparent;
    border-radius: 4px;
    background: linear-gradient(white, white), linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 100% / 30px 30px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 100% / 30px 30px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 0 / 30px 30px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 0 / 30px 30px, linear-gradient(#e6e6e6, #e6e6e6);
    background-clip: padding-box, border-box, border-box, border-box, border-box, border-box;
    background-origin: border-box;
}
.bf-group-sp--whiteboard:before,
.bf-group-sp--whiteboard:after ,
.bf-group-sp--whiteboard .wp-block-group__inner-container:before,
.bf-group-sp--whiteboard .wp-block-group__inner-container:after {
    position: absolute;
    content: "";
}
.bf-group-sp--whiteboard:before {
    right: 10px;
    bottom: 15px;
    width: 52px;
    height: 8px;
    border-radius: 2px 2px 0 0;
    background: #5a95f5;
}
.bf-group-sp--whiteboard:after {
    right: 11px;
    bottom: 0;
    width: 50px;
    height: 15px;
    border-radius: 0 0 4px 4px;
    background: #d2e2fc;
}
.bf-group-sp--whiteboard .wp-block-group__inner-container:before {
    right: 71px;
    bottom: 0;
    width: 48px;
    height: 8px;
    background: linear-gradient(90deg, #ea4335 8%, #f2f2f2 8%, #f2f2f2 70%, #ea4335 70%);
}
.bf-group-sp--whiteboard .wp-block-group__inner-container:after {
    right: 98px;
    bottom: 8px;
    width: 48px;
    height: 8px;
    background: linear-gradient(90deg, #333 8%, #f2f2f2 calc(8% + 1px), #f2f2f2 70%, #333 calc(70% + 1px));
    transform: rotate(-20deg);
}


.bf-group-sp--whiteboard2 {
    position: relative;
    padding: 1.5rem 1.5rem 2rem;
    border: 10px solid transparent;
    border-radius: 4px;
    background: linear-gradient(white, white), linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 100% / 10px 10px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 100% / 10px 10px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 0 / 10px 10px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 0 / 10px 10px, linear-gradient(#e6e6e6, #e6e6e6);
    background-clip: padding-box, border-box, border-box, border-box, border-box, border-box;
    background-origin: border-box;
}
.bf-group-sp--whiteboard2:before,
.bf-group-sp--whiteboard2:after ,
.bf-group-sp--whiteboard2 .wp-block-group__inner-container:before,
.bf-group-sp--whiteboard2 .wp-block-group__inner-container:after {
    position: absolute;
    content: "";
}
.bf-group-sp--whiteboard2:before {
    right: 10px;
    bottom: 15px;
    width: 52px;
    height: 8px;
    border-radius: 2px 2px 0 0;
    background: #5a95f5;
}
.bf-group-sp--whiteboard2:after {
    right: 11px;
    bottom: 0;
    width: 50px;
    height: 15px;
    border-radius: 0 0 4px 4px;
    background: #d2e2fc;
}
.bf-group-sp--whiteboard2 .wp-block-group__inner-container:before {
    right: 71px;
    bottom: 0;
    width: 48px;
    height: 8px;
    background: linear-gradient(90deg, #ea4335 8%, #f2f2f2 8%, #f2f2f2 70%, #ea4335 70%);
}
.bf-group-sp--whiteboard2 .wp-block-group__inner-container:after {
    right: 98px;
    bottom: 8px;
    width: 48px;
    height: 8px;
    background: linear-gradient(90deg, #333 8%, #f2f2f2 calc(8% + 1px), #f2f2f2 70%, #333 calc(70% + 1px));
    transform: rotate(-20deg);
}

.bf-group-sp--whiteboard3 {
    position: relative;
    padding: 1.5rem 1.5rem 2rem;
    border: 10px solid transparent;
    border-radius: 4px;
    background: linear-gradient(white, white), linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 100% / 10px 10px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 100% / 10px 10px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 0 / 10px 10px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 0 / 10px 10px, linear-gradient(#dadada 40%, #e6e6e6 40%) no-repeat 100% 100% / 100% 10px, linear-gradient(#e6e6e6 60%, #dadada 60%) no-repeat 0 0 / 100% 10px, linear-gradient(90deg, #e6e6e6 55%, #dadada 55%) no-repeat 0 0 / 10px 100%, linear-gradient(-90deg, #e6e6e6 55%, #dadada 55%) no-repeat 100% 0 / 10px 100%;
    background-clip: padding-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box;
    background-origin: border-box;
}
.bf-group-sp--whiteboard3:before,
.bf-group-sp--whiteboard3:after ,
.bf-group-sp--whiteboard3 .wp-block-group__inner-container:before,
.bf-group-sp--whiteboard3 .wp-block-group__inner-container:after {
    position: absolute;
    content: "";
}
.bf-group-sp--whiteboard3:before {
    right: 10px;
    bottom: 15px;
    width: 52px;
    height: 8px;
    border-radius: 2px 2px 0 0;
    background: #5a95f5;
}
.bf-group-sp--whiteboard3:after {
    right: 11px;
    bottom: 0;
    width: 50px;
    height: 15px;
    border-radius: 0 0 4px 4px;
    background: #d2e2fc;
}
.bf-group-sp--whiteboard3 .wp-block-group__inner-container:before {
    right: 71px;
    bottom: 0;
    width: 48px;
    height: 8px;
    background: linear-gradient(90deg, #ea4335 8%, #f2f2f2 8%, #f2f2f2 70%, #ea4335 70%);
}
.bf-group-sp--whiteboard3 .wp-block-group__inner-container:after {
    right: 98px;
    bottom: 8px;
    width: 48px;
    height: 8px;
    background: linear-gradient(90deg, #333 8%, #f2f2f2 calc(8% + 1px), #f2f2f2 70%, #333 calc(70% + 1px));
    transform: rotate(-20deg);
}

使い方

導入方法

コピーボタンをクリック
投稿画面（エディタ）で右クリックしてプレーンテキストとして貼り付け

ー動画（予定）ー

オリジナルスタイルのルール

クラス名の付け方

原則として使用するクラス名は1つとする
クラス名からは役割がわかるものとする
クラス名からはデザインのイメージがわかるものとする
接頭語はbf-とする
デザインを意味する部分は–で繋ぐ
詳細度は高め（ただしbodyなど広範囲に影響するのはNG）

CSSの書き方

余白の値はできるだけremまたはpx
デフォルトカラー（うすめ）は#eee
デフォルトカラー（こいめ）は#333
colorとbackgroundは色設定から変更できることを頭に入れておく
疑似要素をテキストの後ろにしたい場合は、親にzindex 0、疑似要素にzindex -1にしておく
importantは最低限なら使ってもいいと思う

グループブロック｜スペシャル（ホワイトボード）

構造詳細

使い方

導入方法

オリジナルスタイルのルール

クラス名の付け方

CSSの書き方

グループブロック｜シンプル（重ね）

グループブロック｜スペシャル（クリップボード）

グループブロック｜スペシャル（手紙）

グループブロック｜シンプル（上タイトル左右線）

グループブロック｜スペシャル（黒板）

グループブロック｜シンプル（上タイトル//）