NEWG3サイト

2025年10月9日お知らせ

サンプル記事１

2024年3月24日お知らせ

グラデーションLINE-1

2021年7月11日お知らせ

ホームページを公開（ＯＰＥＮ）しました！

2021年7月11日お知らせ

弊社のコロナウィルス対策について

一覧＞＞

1. 白抜き文字CSS
1.1. G3
1.2. KATAWARA
1.3. ブログタイトル
1.4. カバータイトル
1.5. 行間・時間を空けたCSS 参考
2. グローバルメニュー
2.1. 文字の大きさ変更
3. CTA
3.1. ホバーでふわっと背景・ボタン1つ
4. 採用情報
4.1. ボタン1つ
5. お問い合わせ
5.1. ボタン２つ
6. お問い合わせ
6.1. 2ブロックボタン背景シンプルカラー
7. お問い合わせ
7.1. 医療関係・診療時間
8. ご予約・お問い合わせはお気軽にどうぞ
9. ご予約はこちらから
9.1. 動画を入れやすいCTA
10. ご雑談ください
11. 000-0000-0000
11.1. スライダー付きCTA
11.2. 時代に合ったデザイン
11.3. モバイルフレンドリー
11.4. 予算に合わせたプラン
12. 公式SNS
12.1.1.1.1. ＼公式 SNS ／
13. 見出し
14. SERVICE
15. 見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・
15.1. 斜め線の中央見出し
16. 中央見出しデザイン
16.1. サブタイトル背景斜め中央見出し
17. 中央見出しデザイン
17.1. サブタイトル背景三角中央見出し
18. 中央見出しデザイン
18.1. 数字の上に線見出し
19. 数字と見出しデザイン
19.1. 数字の上に線中央見出し
20. 数字と見出しデザイン
20.1. 数字の横に短い線中央見出し
21. 数字と見出しデザイン
21.1. タイトルと重ねた数字見出し
22. 数字と見出しデザイン
22.1. サブテキストと数字見出し
23. 数字と見出しデザイン
23.1. 背景あり角斜め色付き
24. 背景あり見出しデザイン
24.1. 背景あり角斜め
25. 背景あり見出しデザイン
25.1. 背景をズラす
26. 背景あり見出しデザイン
26.1. 斜めストライプ
27. シンプル見出しデザイン
28. アラート
28.1. 背景塗りSuccessアラート
28.2. 枠線Infoアラート
28.3. 枠線Infoアラート
28.4. 背景塗りPointアラート
28.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;
}

CTA

ホバーでふわっと背景・ボタン1つ

採用情報

RECRUIT

お問い合わせ

contact

ご依頼ご相談、

お気軽にお問い合わせください。

お問い合わせこちらから

お問い合わせ

ボタン２つ

お問い合わせ

contact

ご依頼ご相談はこちらから！

お気軽にご相談ください。

メールでのお問い合わせ

お気軽にお問い合わせください

000-0000-0000

電話でのお問い合わせはこちら

2ブロックボタン背景シンプルカラー

お問い合わせ

CONTACT

住まいに関するお悩みや相談など、なんでもお気軽にご相談ください。
相談やお見積もりは無料です。

お電話のお問い合わせ

000-0000-0000

営業時間：10:00～18:00

メールのお問い合わせ

お問い合わせ

医療関係・診療時間

ご予約・お問い合わせは

お気軽にどうぞ

所在地：
〒000-0000 名古屋市中村区名駅１丁目〇〇ビル2F
最寄駅：
JR〇〇駅から徒歩○分 / 地下鉄〇〇駅から徒歩○分

診療時間	月	火	水	木	金	土	日
9:30 〜 12:30	●	●	ー	●	●	●	ー
15:00 〜 20:00	●	●	ー	●	●	ー	ー

000-0000-0000

受付 8:30-12:00 / 14:30-19:30
（水・日・祝日・土の午後は休診）

ネット予約

24時間受付

ご予約はこちらから

WEBからはこちら

24時間受付中

000-0000-0000

受付時間：9:00〜17:30

動画を入れやすいCTA

ご雑談ください

CONTACT

お電話でのお問い合わせ

000-0000-0000

受付時間 9:00-18:00

[ 土・日・祝日除く ]

お問い合わせ

スライダー付きCTA

時代に合ったデザイン

時代に合った新しいデザインと機能を提供し、ブランドの印象を新たにしましょう。ウェブサイトのリニューアルは、新たな機会を開拓し、訪問者に新鮮な印象を与えます。

モバイルフレンドリー

モバイルフレンドリーなウェブサイトは、現代のオンラインビジネスに不可欠です。お客様のウェブサイトは、すべてのデバイスで適切に表示されます。

予算に合わせたプラン

デザイン料金は、プロジェクトのスケールや要件によって異なります。詳細な要件に応じて価格は調整できます。お客様のご予算に合わせたプランを提供いたします。

お問い合わせ

VK DESiGN について

公式SNS

＼公式 SNS ／

見出し

M PLUS 1p

SERVICE

Feature 01

見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・見出し・

斜め線の中央見出し

SUBTEXT

中央見出しデザイン

サブタイトル背景斜め中央見出し

中央見出しデザイン

SUBTEXT

サブタイトル背景三角中央見出し

中央見出しデザイン

SUBTEXT

数字の上に線見出し

数字と見出しデザイン

数字の上に線中央見出し

数字と見出しデザイン

数字の横に短い線中央見出し

数字と見出しデザイン

タイトルと重ねた数字見出し

数字と見出しデザイン

▲2つめはブロックの「カスタムCSS」に直接記述する。高度な設定でクラス名を変更「.is-style-vkp-heading-overlap」を「.is-style-vkp-heading-overlap2」にする

サブテキストと数字見出し

POINT

数字と見出しデザイン

背景あり角斜め色付き

背景あり見出しデザイン

背景あり角斜め

背景あり見出しデザイン

背景をズラす

背景あり見出しデザイン

斜めストライプ

シンプル見出しデザイン