目次
- 1. 白抜き文字CSS
- 1.1. G3
- 1.2. KATAWARA
- 1.3. ブログタイトル
- 1.4. カバータイトル
- 1.5. 行間・時間を空けたCSS 参考
- 2. グローバルメニュー
- 2.1. 文字の大きさ変更
- 3. 見出し
- 4. SERVICE
- 5. 見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・
- 5.1. 斜め線の中央見出し
- 6. 中央見出しデザイン
- 6.1. サブタイトル背景斜め 中央見出し
- 7. 中央見出しデザイン
- 7.1. サブタイトル背景三角 中央見出し
- 8. 中央見出しデザイン
- 8.1. 数字の上に線 見出し
- 9. 数字と見出しデザイン
- 9.1. 数字の上に線 中央見出し
- 10. 数字と見出しデザイン
- 10.1. 数字の横に短い線 中央見出し
- 11. 数字と見出しデザイン
- 11.1. タイトルと重ねた数字 見出し
- 12. 数字と見出しデザイン
- 12.1. サブテキストと数字 見出し
- 13. 数字と見出しデザイン
- 13.1. 背景あり角斜め色付き
- 14. 背景あり見出しデザイン
- 14.1. 背景あり角斜め
- 15. 背景あり見出しデザイン
- 15.1. 背景をズラす
- 16. 背景あり見出しデザイン
- 16.1. 斜めストライプ
- 17. シンプル見出しデザイン
- 18. アラート
- 18.1. 背景塗りSuccessアラート
- 18.2. 枠線Infoアラート
- 18.3. 枠線Infoアラート
- 18.4. 背景塗りPointアラート
- 18.5. 枠線Pointアラート
白抜き文字CSS
G3
h3.ltg-slide-text-title{
line-height: 1.6em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
.ltg-slide-text-title+.ltg-slide-text-caption {
font-size:1.6em;
line-height: 1.6em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
KATAWARA
h3.slide-text-title{
line-height: 1.6em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
.slide-text-caption {
font-size:1.6em;
line-height: 1.6em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
ブログタイトル
/* BLOGタイトル白フチ */
.page-header-title, h1.page-header-title {
font-size: 2rem;
line-height: 1;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
カバータイトル
/* タイトル白フチ */
.w-box {
line-height: 1;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
行間・時間を空けたCSS 参考
h3.slide-text-title{
line-height: 1.6em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
.slide-text-caption {
font-size:1.4em;
line-height: 1.6em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
/* sp767S */
@media(max-width:767px){
.slide-text-caption {
font-size:1em;
line-height: 1.2em;
letter-spacing: 0.1em;
margin: 0 0 30px;
display: block;
text-shadow: #ffffff 2px 0px, #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px, #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px, #ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px, #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}
}
ーーーーーーーーーーーーーーーーー
@media(max-width:767px){
h3.ltg-slide-text-title {
font-size:1.4em;
}}
グローバルメニュー
文字の大きさ変更
/* ナビ文字の大きさ */
.global-nav-list>li .global-nav-name {
font-size: 16px;
}
.global-nav-list li {
font-size: 16px;
}
.site-footer {
--vk-size-text-sm: 14px;
}
見出し
M PLUS 1p
SERVICE
Feature 01
見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・
斜め線の中央見出し
SUBTEXT
中央見出しデザイン
サブタイトル背景斜め 中央見出し
中央見出しデザイン
SUBTEXT
サブタイトル背景三角 中央見出し
中央見出しデザイン
SUBTEXT
数字の上に線 見出し
01
数字と見出しデザイン
数字の上に線 中央見出し
01
数字と見出しデザイン
数字の横に短い線 中央見出し
01
数字と見出しデザイン
タイトルと重ねた数字 見出し
数字と見出しデザイン
▲2つめはブロックの「カスタムCSS」に直接記述する。高度な設定でクラス名を変更「.is-style-vkp-heading-overlap」を「.is-style-vkp-heading-overlap2」にする
サブテキストと数字 見出し
POINT
01
数字と見出しデザイン
背景あり角斜め色付き
背景あり見出しデザイン
背景あり角斜め
背景あり見出しデザイン
背景をズラす
背景あり見出しデザイン
斜めストライプ
シンプル見出しデザイン
アラート
参考：https://www.vektor-inc.co.jp/post/block-patterns-of-alert-use-border-box/
背景塗りSuccessアラート
Success
この記事は Lightning XX.X 以降でのみ有効です。最新版にアップデートしてご確認ください。
枠線Infoアラート
Info
この記事は Lightning XX.X 以降でのみ有効です。最新版にアップデートしてご確認ください。
枠線Infoアラート
Info
この記事は Lightning XX.X 以降でのみ有効です。最新版にアップデートしてご確認ください。
背景塗りPointアラート
Point
この記事は Lightning XX.X 以降でのみ有効です。最新版にアップデートしてご確認ください。
枠線Pointアラート
Point
この記事は Lightning XX.X 以降でのみ有効です。最新版にアップデートしてご確認ください。