いつものデザインに+αの個性を！ヘッダーを波型に演出するCSSテクニック
2025年8月19日
ちょっと差をつけたい、そんなときに
PAGEKitのテンプレートはそのままでも美しく、統一感のある構成が魅力です。
でも、たとえば「自分のサイトだけ、ちょっと印象的にしたい」と思ったことはありませんか？
今回はテンプレートを壊すことなく、ヘッダーに波型のアクセントを加えるカスタマイズをご紹介します。
でも、たとえば「自分のサイトだけ、ちょっと印象的にしたい」と思ったことはありませんか？
今回はテンプレートを壊すことなく、ヘッダーに波型のアクセントを加えるカスタマイズをご紹介します。
波型デザインでページに動きをプラス
直線的な構成の中に、曲線をひとつ加えるだけで、サイトの印象が一気に柔らかく、親しみやすくなります。
特にファーストビューの下端にさりげなく波型があると、全体に「プロっぽさ」を加えることができます。
特にファーストビューの下端にさりげなく波型があると、全体に「プロっぽさ」を加えることができます。
実現方法はオリジナルCSSでOK！
ステップ1：ヘッダー装飾用のCSSを用意する
#header {
position: relative;
}
#header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,50 C80,0 160,0 240,50 C320,100 400,100 480,50 C560,0 640,0 720,50 C800,100 880,100 960,50 C1040,0 1120,0 1200,50 C1280,100 1360,100 1440,50 L1440,200 L0,200 Z' fill='%230098d8'/><path d='M0,100 C80,50 160,50 240,100 C320,150 400,150 480,100 C560,50 640,50 720,100 C800,150 880,150 960,100 C1040,50 1120,50 1200,100 C1280,150 1360,150 1440,100 L1440,200 L0,200 Z' fill='%23a4e7f2'/><path d='M0,150 C80,100 160,100 240,150 C320,200 400,200 480,150 C560,100 640,100 720,150 C800,200 880,200 960,150 C1040,100 1120,100 1200,150 C1280,200 1360,200 1440,150 L1440,200 L0,200 Z' fill='%23ffffff'/></svg>");
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
}
position: relative;
}
#header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,50 C80,0 160,0 240,50 C320,100 400,100 480,50 C560,0 640,0 720,50 C800,100 880,100 960,50 C1040,0 1120,0 1200,50 C1280,100 1360,100 1440,50 L1440,200 L0,200 Z' fill='%230098d8'/><path d='M0,100 C80,50 160,50 240,100 C320,150 400,150 480,100 C560,50 640,50 720,100 C800,150 880,150 960,100 C1040,50 1120,50 1200,100 C1280,150 1360,150 1440,100 L1440,200 L0,200 Z' fill='%23a4e7f2'/><path d='M0,150 C80,100 160,100 240,150 C320,200 400,200 480,150 C560,100 640,100 720,150 C800,200 880,200 960,150 C1040,100 1120,100 1200,150 C1280,200 1360,200 1440,150 L1440,200 L0,200 Z' fill='%23ffffff'/></svg>");
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
}
ステップ2：デザイン編集からオリジナルCSSを開く
ページ上部メニュー「背景・カラー」→「オリジナルCSS」→「編集」ボタンをクリックします。
ステップ3：CSSを貼り付けて保存・反映
CSSを貼り付けたら、「設定」ボタンで保存します。
続いて「オリジナルCSSを利用する」にチェックを入れ、「変更を反映する」ボタンをクリックしてください。
続いて「オリジナルCSSを利用する」にチェックを入れ、「変更を反映する」ボタンをクリックしてください。
オリジナルCSSで設定する手順
ステップ1：デザイン編集画面を開く
「背景・カラー」→「オリジナルCSS」タブ →「編集」ボタンをクリックします。
ステップ2：CSSを記述する
#header {
position: relative;
}
#header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,50 C80,0 160,0 240,50 C320,100 400,100 480,50 C560,0 640,0 720,50 C800,100 880,100 960,50 C1040,0 1120,0 1200,50 C1280,100 1360,100 1440,50 L1440,200 L0,200 Z' fill='%230098d8'/><path d='M0,100 C80,50 160,50 240,100 C320,150 400,150 480,100 C560,50 640,50 720,100 C800,150 880,150 960,100 C1040,50 1120,50 1200,100 C1280,150 1360,150 1440,100 L1440,200 L0,200 Z' fill='%23a4e7f2'/><path d='M0,150 C80,100 160,100 240,150 C320,200 400,200 480,150 C560,100 640,100 720,150 C800,200 880,200 960,150 C1040,100 1120,100 1200,150 C1280,200 1360,200 1440,150 L1440,200 L0,200 Z' fill='%23ffffff'/></svg>");
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
}
position: relative;
}
#header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,50 C80,0 160,0 240,50 C320,100 400,100 480,50 C560,0 640,0 720,50 C800,100 880,100 960,50 C1040,0 1120,0 1200,50 C1280,100 1360,100 1440,50 L1440,200 L0,200 Z' fill='%230098d8'/><path d='M0,100 C80,50 160,50 240,100 C320,150 400,150 480,100 C560,50 640,50 720,100 C800,150 880,150 960,100 C1040,50 1120,50 1200,100 C1280,150 1360,150 1440,100 L1440,200 L0,200 Z' fill='%23a4e7f2'/><path d='M0,150 C80,100 160,100 240,150 C320,200 400,200 480,150 C560,100 640,100 720,150 C800,200 880,200 960,150 C1040,100 1120,100 1200,150 C1280,200 1360,200 1440,150 L1440,200 L0,200 Z' fill='%23ffffff'/></svg>");
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
}
すこし複雑な内容ですが、上記をそのままコピーして貼り付けたらOKです。
ステップ3：設定・反映
「設定」で保存し、「オリジナルCSSを利用する」にチェックを入れて「変更を反映する」をクリックすれば完了です。
色を変えてみる
このデザインで使われている色は、CSS内の background-image に埋め込まれた SVGコードの中の fill 属性 で指定されています。具体的には以下の3箇所にカラーコードがあります。
fill='%230098d8' → #0098d8 濃い水色・青に近い色
fill='%23a4e7f2' → #a4e7f2 明るい水色
fill='%23ffffff' → #ffffff 白（ホワイト）
fill='%23a4e7f2' → #a4e7f2 明るい水色
fill='%23ffffff' → #ffffff 白（ホワイト）
色を変更したい場合は、各 fill='%23xxxxxx' の カラーコード部分（xxxxxx） をお好みの色に書き換えてください。
たとえば、濃い青をオレンジに変更したい場合は、
たとえば、濃い青をオレンジに変更したい場合は、
fill='%23ffa500'
とすれば、波の1層目がオレンジになります。
※カラーコードは 外部サイトのHTMLカラーコードなどで自由に選べます。
変更後は、デザインに反映されているかどうか、ページをリロードしてご確認ください。
変更後は、デザインに反映されているかどうか、ページをリロードしてご確認ください。
テンプレートを活かして、個性を加える
PAGEKitのテンプレートはそのままでも十分に使える品質ですが、
「自分らしさ」や「ひと目で印象に残る工夫」をしたいときには、CSSを使ったアレンジが効果的です。
今回ご紹介した波型の装飾も、ページの第一印象をぐっと良くしてくれるテクニックの一つです。
ぜひ一度、取り入れてみてください。
「自分らしさ」や「ひと目で印象に残る工夫」をしたいときには、CSSを使ったアレンジが効果的です。
今回ご紹介した波型の装飾も、ページの第一印象をぐっと良くしてくれるテクニックの一つです。
ぜひ一度、取り入れてみてください。
ABOUT ME  |
ホームページかんたん作成のPAGEKit（ページキット） ホームページを作るのは、むずかしそう。 そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。 専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。 まずは一度、実際の使いやすさを体験してみませんか？ |