このページは、VK Blocks Proの「カスタムブロックスタイル設定 ( Pro版のみ )」に設定していただくことを想定した、見出しデザインのスタイルデータ一覧ページです。
「カスタムブロックスタイル設定 ( Pro版のみ )」に必要な、CSSクラスの算出に使用されるスタイルの識別子 / ブロックスタイルラベル / CSS の例が書いてありますので、ぜひ参考に設定してください。
※CSSには他の見出しデザインの影響をうけにくくするため、打ち消しのCSSも書かれています。
目次
- 0.1. 吹き出し 背景プライマリ
- 0.2. 背景塗り 背景プライマリ
- 0.3. 背景塗り スティッチ 背景プライマリ
- 0.4. 上線 プライマリ 背景塗りなし
- 0.5. 上線 プライマリ 背景黒
- 0.6. 二重線 プライマリ
- 0.7. 線 プライマリ
- 0.8. 下線 プライマリ
- 0.9. 下線 左キーカラー
- 0.10. 左線 背景灰色
- 0.11. 左線 背景塗りなし
- 0.12. 斜線ストライプ プライマリ
- 0.13. 斜線ストライプ
- 0.14. ストライプ プライマリ
- 0.15. ストライプ
- 0.16. 短い下線 プライマリ
- 0.17. 短い下線
- 0.18. 短い上線 プライマリ
- 0.19. 短い上線
- 0.20. 短い左右線 プライマリ
- 0.21. 短い左右線
- 0.22. カギ括弧 プライマリ
- 0.23. カギ括弧
一括でインポートする場合はこちらをご利用ください。
見出しカスタムブロックスタイル インポート用データ
- 下記のファイルをダウンロード
- zip ファイルなので解凍してください
- 設定 > VK Blocks ページ下部の「インポート エクスポート ツール」からファイルを選択してインポート
- ポップアップが表示されるので「追加」でインポートしてください
吹き出し 背景プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--speech-balloon--bg-primary
selector {
border: none;
padding: unset;
margin-left: auto;
margin-right: auto;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content: none;
overflow: unset;
background-color: var(--vk-color-primary);
position: relative;
padding: 0.6em 0.8em 0.55em;
margin-bottom: var(--vk-margin-headding-bottom);
color: #fff;
border-radius: 4px;
text-align: left;
}
selector::before {
color: var(--vk-color-text-body);
background-color: unset;
border: none;
padding: unset;
margin-left: auto;
margin-right: auto;
border-radius: unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content: none;
overflow: unset;
content: "";
position: absolute;
top: auto;
left: 40px;
bottom: -20px;
width: auto;
margin-left: -10px;
border: 10px solid transparent;
border-top: 10px solid var(--vk-color-primary);
z-index: 2;
height: auto;
background-color: transparent !important;
}
selector::after {
color: var(--vk-color-text-body);
background-color: unset;
position: relative;
border: none;
padding: unset;
margin-left: auto;
margin-right: auto;
border-radius: unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content: none;
overflow: unset;
}背景塗り 背景プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--background-fill--bg-primary
selector {
background-color:unset;
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
background-color:var(--vk-color-primary);
position: relative;
padding: 0.6em 0.8em 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
color:#fff;
border-radius:4px;
text-align:left;
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}背景塗り スティッチ 背景プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--background-fill-stitch--bg-primary
selector {
background-color:unset;
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
box-shadow: unset;
content:none;
overflow: unset;
background-color:var(--vk-color-primary);
padding: 0.6em 0.7em 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
color:#fff;
border-radius:4px;
outline: dashed 1px #fff;
outline-offset: -4px;
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}上線 プライマリ 背景塗りなし
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--topborder--bg-none
selector {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
padding: 0.5em 0 0.45em;
margin-bottom:var(--vk-margin-headding-bottom);
border-top: 2px solid var(--vk-color-primary);
border-bottom: 1px solid var(--vk-color-border-hr);
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}上線 プライマリ 背景黒
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--topborder-background-fill--bg-black
selector {
color:var(--vk-color-text-body);
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
background-color: #191919;
padding: 0.5em 0.7em 0.45em;
margin-bottom:var(--vk-margin-headding-bottom);
color: #fff;
border-top: 2px solid var(--vk-color-primary);
border-bottom: 1px solid var(--vk-color-border-hr);
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}二重線 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--double--border-primary
selector {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
padding: 0.6em 0 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
border-top: double 3px var(--vk-color-primary);
border-bottom: double 3px var(--vk-color-primary);
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}線 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--solid--border-primary
selector {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
padding: 0.6em 0 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
border-top: solid 1px var(--vk-color-primary);
border-bottom: solid 1px var(--vk-color-primary);
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}下線 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--solid-bottomborder--border-primary
selector {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
padding: 0.6em 0 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
border-bottom: solid 1px var(--vk-color-primary);
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}下線 左キーカラー
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--solid-bottomborder--border-left-primary
selector {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
padding: 0.6em 0 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
border-bottom: 1px solid var(--vk-color-border-hr);
background-color:transparent;
text-align:left;
border-radius:0;
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::after {
content: "";
line-height: 0;
display: block;
overflow: hidden;
position: absolute;
left:0;
bottom: -1px;
width: 30%;
border-bottom: 1px solid var(--vk-color-primary);
margin-left: 0;
height:inherit;
}左線 背景灰色
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--leftborder--bg-gray
selector {
color:var(--vk-color-text-body);
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
padding: 0.6em 0.7em 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
border-left:solid 2px var(--vk-color-primary);
background-color: rgba(0,0,0,0.1);
text-align:left;
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}左線 背景塗りなし
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--leftborder--bg-none
selector {
color:var(--vk-color-text-body);
position: relative;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
border:none;
padding: 0.6em 0.7em 0.55em;
margin-bottom:var(--vk-margin-headding-bottom);
border-left:solid 2px var(--vk-color-primary);
background-color:transparent;
text-align:left;
}
selector::before,
selector::after {
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}斜線ストライプ プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--diagonal-stripe--primary
selector{
color:var(--vk-color-text-body);
background-color:unset;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
position:relative;
padding-bottom:1rem;
}
selector::before,
selector::after {
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::before{
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background-image:repeating-linear-gradient(
-45deg, var(--vk-color-primary), var(--vk-color-primary) 1px, transparent 1px, transparent 5px
);
background-size:7px 7px;
-webkit-background-size:7px 7px;
border:none;
top:unset;
}斜線ストライプ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--diagonal-stripe--currentcolor
selector{
color:var(--vk-color-text-body);
background-color:unset;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
position:relative;
padding-bottom:1rem;
}
selector::before,
selector::after {
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::before{
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background-image:repeating-linear-gradient(
-45deg, currentColor, currentColor 1px, transparent 1px, transparent 5px
);
background-size:7px 7px;
-webkit-background-size:7px 7px;
border:none;
top:unset;
}ストライプ プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--stripe--primary
selector{
color:var(--vk-color-text-body);
background-color:unset;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
position:relative;
padding-bottom:1rem;
}
selector::before,
selector::after {
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::before{
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background-image:repeating-linear-gradient(
-90deg, var(--vk-color-primary), var(--vk-color-primary) 1px, transparent 1px, transparent 5px
);
border:none;
top:unset;
}ストライプ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--stripe--currentcolor
selector{
color:var(--vk-color-text-body);
background-color:unset;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
position:relative;
padding-bottom:1rem;
}
selector::before,
selector::after {
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::before{
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background-image:repeating-linear-gradient(
-90deg, currentColor, currentColor 1px, transparent 1px, transparent 5px
);
border:none;
top:unset;
}短い下線 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--short-bottom--primary
selector{
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
text-align: center;
}
selector::before,
selector::after {
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::after{
border: unset;
top:unset;
left:unset;
bottom:unset;
content: '';
display: block;
width: 3rem;
height: 1px;
margin-top: 1rem;
background-color:var(--vk-color-primary);
}短い下線
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--short-bottom--currentcolor
selector{
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
text-align: center;
}
selector::before,
selector::after {
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::after{
border: unset;
top:unset;
left:unset;
bottom:unset;
content: '';
display: block;
width: 3rem;
height: 1px;
margin-top: 1rem;
background-color:currentColor;
}短い上線 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--short-top--primary
selector{
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
text-align: center;
}
selector::before,
selector::after {
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::before{
border: unset;
top:unset;
left:unset;
bottom:unset;
content: '';
display: block;
width: 3rem;
height: 1px;
margin-bottom: 1rem;
background-color:var(--vk-color-primary);
}短い上線
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--short-top--currentcolor
selector{
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
text-align: center;
}
selector::before,
selector::after {
position: relative;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
}
selector::before{
border: unset;
top:unset;
left:unset;
bottom:unset;
content: '';
display: block;
width: 3rem;
height: 1px;
margin-bottom: 1rem;
background-color:currentColor;
}短い左右線 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--short-both-ends--primary
selector{
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border:0;
}
selector::before,
selector::after {
position: unset;
border: unset;
margin-left: unset;
margin-right:unset;
flex-grow: unset;
padding:unset;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
overflow: unset;
content: '';
width: 30px;
height: 1px;
background-color:var(--vk-color-primary);
}
selector::before{
margin-right:14px;
}
selector::after {
margin-left:14px;
}短い左右線
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--short-both-ends--currentcolor
selector{
color:var(--vk-color-text-body);
background-color:unset;
position: relative;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border:0;
}
selector::before,
selector::after {
position: unset;
border: unset;
margin-left: unset;
margin-right:unset;
flex-grow: unset;
padding:unset;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
overflow: unset;
content: '';
width: 30px;
height: 1px;
background-color:currentColor;
}
selector::before{
margin-right:14px;
}
selector::after {
margin-left:14px;
}カギ括弧 プライマリ
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--bracket--border-primary
selector{
color:var(--vk-color-text-body);
background-color:unset;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
position: relative;
padding:0.5em 1em;
text-align: center;
}
selector::before,
selector::after {
background: unset;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
overflow: unset;
position: absolute;
content:'';
width: 1rem;
height: 2rem;
}
selector::before {
border-left: solid 1px var(--vk-color-primary);
border-top: solid 1px var(--vk-color-primary);
top:0;
left: 0;
border-right: unset;
border-bottom: unset;
}
selector::after {
border-right: solid 1px var(--vk-color-primary);
border-bottom: solid 1px var(--vk-color-primary);
bottom:0;
right: 0;
border-left: unset;
border-top: unset;
margin-right: unset;
left:unset;
}カギ括弧
CSSクラスの算出に使用されるスタイルの識別子例 : vk-heading--bracket--border-currentcolor
selector{
color:var(--vk-color-text-body);
background-color:unset;
border:none;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
content:none;
overflow: unset;
position: relative;
padding:0.5em 1em;
text-align: center;
}
selector::before,
selector::after {
background: unset;
border:none;
padding:unset;
margin-left: auto;
margin-right: auto;
border-radius:unset;
outline: unset;
outline-offset: unset;
box-shadow: unset;
overflow: unset;
position: absolute;
content:'';
width: 1rem;
height: 2rem;
}
selector::before {
border-left: solid 1px currentColor;
border-top: solid 1px currentColor;
top:0;
left: 0;
border-right: unset;
border-bottom: unset;
}
selector::after {
border-right: solid 1px currentColor;
border-bottom: solid 1px currentColor;
bottom:0;
right: 0;
border-left: unset;
border-top: unset;
margin-right: unset;
left:unset;
}