見出しデザインスタイルデータ


このページは、VK Blocks Proの「カスタムブロックスタイル設定 ( Pro版のみ )」に設定していただくことを想定した、見出しデザインのスタイルデータ一覧ページです。
カスタムブロックスタイル設定 ( Pro版のみ )」に必要な、CSSクラスの算出に使用されるスタイルの識別子 / ブロックスタイルラベル / CSS の例が書いてありますので、ぜひ参考に設定してください。
※CSSには他の見出しデザインの影響をうけにくくするため、打ち消しのCSSも書かれています。

一括でインポートする場合はこちらをご利用ください。

見出しカスタムブロックスタイル インポート用データ

  1. 下記のファイルをダウンロード
  2. zip ファイルなので解凍してください
  3. 設定 > VK Blocks ページ下部の「インポート エクスポート ツール」からファイルを選択してインポート
  4. ポップアップが表示されるので「追加」でインポートしてください
Private File – Access Forbidden

吹き出し 背景プライマリ

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;
}
PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。