タイトルサンプル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
タイトルなし
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
構造詳細
クラス名
bf-group-simple--toptitle-shortwidthクラス名（タイトル）
bf-group-simple--toptitle-shortwidth__titleCSS
.bf-group-simple--toptitle-shortwidth {
position: relative;
margin-top: 3rem;
padding: 1.5rem;
}
p.bf-group-simple--toptitle-shortwidth__title {
position: absolute;
top: -2.5rem;
left: 0;
line-height: 2rem;
margin-bottom: 0;
padding: 0.25rem 1rem;
border-radius: 8px 8px 0 0;
font-weight: 600;
text-align: center;
}使い方
導入方法
- コピーボタンをクリック
- 投稿画面（エディタ）で右クリックしてプレーンテキストとして貼り付け
ー動画（予定）ー
オリジナルスタイルのルール
クラス名の付け方
- 原則として使用するクラス名は1つとする
- クラス名からは役割がわかるものとする
- クラス名からはデザインのイメージがわかるものとする
- 接頭語はbf-とする
- デザインを意味する部分は–で繋ぐ
- 詳細度は高め（ただしbodyなど広範囲に影響するのはNG）
CSSの書き方
- 余白の値はできるだけremまたはpx
- デフォルトカラー（うすめ）は#eee
- デフォルトカラー（こいめ）は#333
- colorとbackgroundは色設定から変更できることを頭に入れておく
- 疑似要素をテキストの後ろにしたい場合は、親にzindex 0、疑似要素にzindex -1にしておく
- importantは最低限なら使ってもいいと思う
a
<!-- wp:group {"className":"bf-group-simple\u002d\u002dtoptitle-shortwidth","style":{"color":{"background":"#f3f8fc","text":"#60a7d6"}},"blockerClassName":"bf-group-simple\u002d\u002dtoptitle-shortwidth","blockerStyle":".bf-group-simple\u002d\u002dtoptitle-shortwidth {\n position: relative;\n margin-top: 3rem;\n padding: 1.5rem;\n}\np.bf-group-simple\u002d\u002dtoptitle-shortwidth__title {\n position: absolute;\n top: -2.5rem;\n left: 0;\n line-height: 2rem;\n margin-bottom: 0;\n padding: 0.25rem 1rem;\n border-radius: 8px 8px 0 0;\n font-weight: 600;\n text-align: center;\n}"} -->
<div class="wp-block-group bf-group-simple--toptitle-shortwidth has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bf-group-simple\u002d\u002dtoptitle-shortwidth__title","textColor":"tsnc_white","style":{"color":{"background":"#60a7d6"}}} -->
<p class="bf-group-simple--toptitle-shortwidth__title has-tsnc-white-color has-text-color has-background" style="background-color:#60a7d6">タイトルサンプル</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"textColor":"tsnc_main_color"} -->
<p class="has-tsnc-main-color-color has-text-color">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->