背景（バックグラウンド）用パーツ

背景（バックグラウンド）用パーツ

• 黒、青、白、オレンジのカラーは、theme.cssの :rootにしているカラーコードが適用されます。各パーツに直接カラーを指定してもOKだし、この :root のカラーコードを好みのテーマカラーに調整して頂いてもOK。

背景（バックグラウンド）用パーツ一覧

bg-wave1

波(ウェーブ)の背景。

<!--svg defs--> <svg style="display:none"> <defs> <path id="wavePath" d="M0 30 V15 Q30 3 60 15 T120 15 V30z" /> </defs> </svg> <section class="bg-wave1-parts bg-wave1-bg-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-bg-parts</h2> <p>上と下の波はそれぞれdivで独立しているので、片一方だけ使用する事もできます。</p> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section> <section class="bg-wave1-parts bg-wave1-primary-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-primary-parts</h2> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section> <section class="bg-wave1-parts bg-wave1-light-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-light-parts</h2> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section> <section class="bg-wave1-parts bg-wave1-accent-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-light-parts</h2> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section>

html

/*波の背景 ---------------------------------------------------------------------------*/ .text-parts > *:first-child {margin-top: 0;} /*波を囲む全体のブロック*/ .bg-wave1-parts { --wave-bg-color: transparent; /*背景色（波＆テキスト背景）*/ --wave-text-color: inherit; /*文字色*/ --wave-height: 80px; /*波の高さ。お好みで。*/ position: relative; padding: calc(var(--wave-height) - 1px) 0; } /*色バリエーション（bg）*/ .bg-wave1-parts.bg-wave1-bg-parts { --wave-bg-color: var(--bg-inverse-color); /*テキスト背景。theme.cssのbg-inverse-colorを読み込みます。*/ --wave-text-color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } /*色バリエーション（primary）*/ .bg-wave1-parts.bg-wave1-primary-parts { --wave-bg-color: var(--primary-color); /*テキスト背景。theme.cssのprimary-colorを読み込みます。*/ --wave-text-color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ } /*色バリエーション（light）*/ .bg-wave1-parts.bg-wave1-light-parts { --wave-bg-color: var(--light-color); /*テキスト背景。theme.cssのlight-colorを読み込みます。*/ --wave-text-color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/ } /*色バリエーション（accent）*/ .bg-wave1-parts.bg-wave1-accent-parts { --wave-bg-color: var(--accent-color); /*テキスト背景。theme.cssのaccent-colorを読み込みます。*/ --wave-text-color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } /*テキストを入れるブロック*/ .bg-wave1-parts .text-parts { padding: var(--content-space-s) var(--content-space-l); background: var(--wave-bg-color); color: var(--wave-text-color); } /*波の色*/ .bg-wave1-parts .wave-wrap-parts use { fill: var(--wave-bg-color); } /*上下の波（共通）*/ .bg-wave1-parts .wave1-parts { position: absolute; left: 0; width: 100%; height: var(--wave-height); } .bg-wave1-parts .wave1-parts svg { display: block; width: 100%; height: 100%; } /*上の波*/ .bg-wave1-parts .wave1-top-parts { top: 0; } /*下の波*/ .bg-wave1-parts .wave1-bottom-parts { bottom: 0; transform: rotate(180deg); }

css

bg-wave1-animation

波(ウェーブ)が動く背景用アニメーション。

<!--svg defs--> <svg style="display:none"> <defs> <path id="wavePath" d="M0 30 V15 Q30 3 60 15 T120 15 V30z" /> </defs> </svg> <section class="bg-wave1-animation-parts bg-wave1-bg-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-bg-parts</h2> <p>上と下の波はそれぞれdivで独立しているので、片一方だけ使用する事もできます。<br> 波のアニメーション速度はcssの--wave-speed: 10s;の10sを変更して下さい。現状10秒です。<br> 波の高さは--wave-height: 80px;の80pxの数字で変更できます。</p> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section> <section class="bg-wave1-animation-parts bg-wave1-primary-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-primary-parts</h2> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section> <section class="bg-wave1-animation-parts bg-wave1-light-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-light-parts</h2> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section> <section class="bg-wave1-animation-parts bg-wave1-accent-parts"> <!--上の波--> <div class="wave1-parts wave1-top-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> <div class="text-parts"> <h2>bg-wave1-light-parts</h2> </div> <!--/.text-parts--> <!--下の波--> <div class="wave1-parts wave1-bottom-parts"> <svg viewBox="0 0 120 28" preserveAspectRatio="none"> <g class="wave-wrap-parts"> <use href="#wavePath" x="0" y="0" /> <use href="#wavePath" x="120" y="0" /> </g> </svg> </div> </section>

html

/*波のアニメーション ---------------------------------------------------------------------------*/ .text-parts > *:first-child {margin-top: 0;} /*波を囲む全体のブロック*/ .bg-wave1-animation-parts { --wave-bg-color: transparent; /*背景色（波＆テキスト背景）*/ --wave-text-color: inherit; /*文字色*/ --wave-height: 80px; /*波の高さ。お好みで。*/ --wave-speed: 10s; /*波の速度。お好みで。*/ position: relative; padding: calc(var(--wave-height) - 1px) 0; } /*色バリエーション（bg）*/ .bg-wave1-animation-parts.bg-wave1-bg-parts { --wave-bg-color: var(--bg-inverse-color); /*テキスト背景。theme.cssのbg-inverse-colorを読み込みます。*/ --wave-text-color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } /*色バリエーション（primary）*/ .bg-wave1-animation-parts.bg-wave1-primary-parts { --wave-bg-color: var(--primary-color); /*テキスト背景。theme.cssのprimary-colorを読み込みます。*/ --wave-text-color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ } /*色バリエーション（light）*/ .bg-wave1-animation-parts.bg-wave1-light-parts { --wave-bg-color: var(--light-color); /*テキスト背景。theme.cssのlight-colorを読み込みます。*/ --wave-text-color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/ } /*色バリエーション（accent）*/ .bg-wave1-animation-parts.bg-wave1-accent-parts { --wave-bg-color: var(--accent-color); /*テキスト背景。theme.cssのaccent-colorを読み込みます。*/ --wave-text-color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } /*テキストを入れるブロック*/ .bg-wave1-animation-parts .text-parts { padding: var(--content-space-s) var(--content-space-l); background: var(--wave-bg-color); color: var(--wave-text-color); } /*波の色*/ .bg-wave1-animation-parts .wave-wrap-parts use { fill: var(--wave-bg-color); } /*上下の波（共通）*/ .bg-wave1-animation-parts .wave1-parts { position: absolute; left: 0; width: 100%; height: var(--wave-height); } .bg-wave1-animation-parts .wave1-parts svg { display: block; width: 100%; height: 100%; } .bg-wave1-animation-parts .wave1-parts .wave-wrap-parts { transform-box: fill-box; transform-origin: 0 0; animation: move-wave var(--wave-speed) linear infinite; } @keyframes move-wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /*上の波*/ .bg-wave1-animation-parts .wave1-top-parts { top: 0; } /*下の波*/ .bg-wave1-animation-parts .wave1-bottom-parts { bottom: 0; transform: rotate(180deg); }

css

bg1

シンプルな単色。

<section> <h2>bg1-parts</h2> <p>cssの:rootで指定しているカラーそれぞれで背景色を指定したタイプです。<br> <span class="color-check">※当cssは、デフォルトに入っているので、使う場合はhtmlのコピペだけでOKです。</span><br> 必ずbg-partsとセットで色のclassを指定して下さい。（例：class="bg-parts bg-primary-parts"）</p> </section> <section class="bg-parts bg1-parts"> <h2>bg1-parts</h2> </section> <section class="bg-parts bg1-primary-parts"> <h2>bg1-primary-parts</h2> </section> <section class="bg-parts bg1-light-parts"> <h2>bg1-light-parts</h2> </section> <section class="bg-parts bg1-accent-parts"> <h2>bg1-accent-parts</h2> </section>

html

<br /> <b>Warning</b>: include(bg/bg1/css.txt): Failed to open stream: No such file or directory in <b>/home/databox/template-party.com/public_html/parts-new/parts-bg.php</b> on line <b>122</b><br /> <br /> <b>Warning</b>: include(): Failed opening 'bg/bg1/css.txt' for inclusion (include_path='.:/opt/php-8.2.28-2/data/pear') in <b>/home/databox/template-party.com/public_html/parts-new/parts-bg.php</b> on line <b>122</b><br />

css

bg2

２色グラデーション。cssで色変更できます。

<section class="bg-parts bg2-parts"> <h2>bg2-parts</h2> <p>2色のグラデーションの背景タイプ。<br> 背景色や角度はcssで変更できます。角度は45deg部分で、この場合は45度という意味です。単純に上から下へ向けて使いたいなら「45deg, 」を削除するだけでもOK。<br> 必ずbg-partsとセットで色のclassを指定して下さい。</p> </section>

html

/*bg2-parts ---------------------------------------------------------------------------*/ .bg2-parts { background: linear-gradient(45deg, #f9d4e1, #f9f2d4); /*背景グラデーション。45度の角度。「#f9d4e1」から「#f9f2d4」になる。*/ color: #555; /*文字色*/ } /*bg-parts（bg2-partsとセットで使います） ---------------------------------------------------------------------------*/ .bg-parts { padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ } /*背景色が続く場合に隙間を空けない*/ .bg-parts + .bg-parts { margin-top: calc(-1 * var(--content-space-l)) !important; }

css

bg3

３色グラデーション。cssで色変更できます。

<section class="bg-parts bg3-parts"> <h2>bg3-parts</h2> <p>3色のグラデーションの背景タイプ。<br> 背景色や角度はcssで変更できます。角度は45deg部分で、この場合は45度という意味です。単純に上から下へ向けて使いたいなら「45deg, 」を削除するだけでもOK。<br> 必ずbg-partsとセットで色のclassを指定して下さい。</p> </section>

html

/*bg3-parts ---------------------------------------------------------------------------*/ .bg3-parts { background: linear-gradient(45deg, #5214cf, #1487cf, #14cf6c); /*背景グラデーション。45度の角度。「#5214cf」→「#1487cf」→「#14cf6c」になる。*/ color: #fff; /*文字色*/ } /*bg-parts（bg3-partsとセットで使います） ---------------------------------------------------------------------------*/ .bg-parts { padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ } /*背景色が続く場合に隙間を空けない*/ .bg-parts + .bg-parts { margin-top: calc(-1 * var(--content-space-l)) !important; }

css

bg4

複雑なグラデーション。MESHERを使用して簡単にcssを書き出しています。

<section class="bg-parts bg4-parts"> <h2>bg4-parts</h2> <p>複雑なグラデーションの背景タイプ。<br> このグラデーションは、海外のグラデーションの生成サイトで作ったものです。<br> <a href="https://csshero.org/mesher/" target="_blank">https://csshero.org/mesher/</a>（MESHER）<br> ページの右側に色の選択肢ボックスがあり、削除したり変更、追加したりすることができます。<br> 画面左側に出力されるグラデーションが表示されており、カーソルを上にもってくると、小さな丸い円が出て、グラデーションの場所をドラッグで移動することができます。<br> 全てのグラデーションの基準となる背景色は、画面の右上の「Bg Color」という所です。デフォルトでは赤色になっているようです。<br> グラデーションが決まったら、画面右下にある「Export」ボタンを押し、別途出てきたページの右下にある「Copy to Clipboard」を押せばコピーできます。<br> 必ずbg-partsとセットで色のclassを指定して下さい。</p> </section>

html

/*bg4-parts ---------------------------------------------------------------------------*/ .bg4-parts { background-color:hsla(0,0%,100%,1); background-image: radial-gradient(at 0% 0%, hsla(65,100%,91%,1) 0px, transparent 50%), radial-gradient(at 79% 23%, hsla(189,78%,82%,1) 0px, transparent 50%), radial-gradient(at 100% 95%, hsla(229,100%,93%,1) 0px, transparent 50%), radial-gradient(at 22% 88%, hsla(170,92%,89%,1) 0px, transparent 50%); color: #555; /*文字色*/ } /*bg-parts（bg4-partsとセットで使います） ---------------------------------------------------------------------------*/ .bg-parts { padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ } /*背景色が続く場合に隙間を空けない*/ .bg-parts + .bg-parts { margin-top: calc(-1 * var(--content-space-l)) !important; }

css

bg5

背景パターンを使ったタイプです。

<section class="bg-parts bg5-parts"> <h2>bg5-parts</h2> <p>背景色＋背景パターンタイプ。<br> 必ずbg-partsとセットで使って下さい。</p> <p>パターン画像がないと表示されないので、<a href="https://template-party.com/parts-new/bg/bg5/bg.zip">こちらからDL</a>してimagesフォルダに入れて下さい。<br> パターン画像を入れ替えたい場合は、画像をimagesフォルダ内に入れて、cssを調整して下さい。詳しい説明はcssに書いています。</p> </section>

html

/*bg5-parts ---------------------------------------------------------------------------*/ .bg5-parts { background: #f0f0f0 url('../images/bg1.png') repeat center center / 15px; /*背景色、背景画像(bg.png)の読み込み。最後の15pxがサイズですがお好みで。*/ color: #555; /*文字色*/ } /*bg-parts（bg5-partsとセットで使います） ---------------------------------------------------------------------------*/ .bg-parts { padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ } /*背景色が続く場合に隙間を空けない*/ .bg-parts + .bg-parts { margin-top: calc(-1 * var(--content-space-l)) !important; }

css

bg6

ななめになった背景です。

<section> <h2>bg6-parts</h2> <p>境界線がななめになっているタイプ。背景色や傾斜角度などはcssで調整できます。</p> </section> <section class="bg-parts bg6-parts bg6-bg-parts"> <h2>bg6-parts</h2> </section> <section class="bg-parts bg6-parts bg6-primary-parts"> <h2>bg6-primary-parts</h2> </section> <section class="bg-parts bg6-parts bg6-light-parts"> <h2>bg6-light-parts</h2> </section> <section class="bg-parts bg6-parts bg6-accent-parts"> <h2>bg6-accent-parts</h2> </section>

html

/*背景 ---------------------------------------------------------------------------*/ .bg6-parts { position: relative; --bg6-slope: 5vw; /*傾斜の角度。お好みで。*/ padding-top: var(--bg6-slope); padding-bottom: var(--bg6-slope); } /*背景色が続く場合に隙間を空けない（bg6専用）*/ .bg6-parts + .bg6-parts { margin-top: calc(var(--bg6-slope) - var(--content-space-l) - 1px) !important; } /*傾斜のブロック設定。基本的に変更不要です。*/ .bg6-parts::before, .bg6-parts::after { content: ""; position: absolute; left: 0; width: 100%; height: calc(var(--bg6-slope) + 1px); } .bg6-parts::before { top: calc(-1 * var(--bg6-slope)); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .bg6-parts::after { bottom: calc(-1 * var(--bg6-slope)); clip-path: polygon(0 0, 100% 0, 0 100%); } /*bg*/ .bg6-bg-parts { background: var(--bg-inverse-color); /*背景色。theme.cssのbg-inverse-colorを読み込みます。*/ color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } .bg6-bg-parts::before, .bg6-bg-parts::after { background: var(--bg-inverse-color);; /*上のbackgroundと揃える*/ } /*primary*/ .bg6-primary-parts { background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/ color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ } .bg6-primary-parts::before, .bg6-primary-parts::after { background: var(--primary-color); /*上のbackgroundと揃える*/ } /*light*/ .bg6-light-parts { background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/ color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/ } .bg6-light-parts::before, .bg6-light-parts::after { background: var(--light-color); /*上のbackgroundと揃える*/ } /*accent*/ .bg6-accent-parts { background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/ color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } .bg6-accent-parts::before, .bg6-accent-parts::after { background: var(--accent-color); /*上のbackgroundと揃える*/ }

css

bg7

背景画像を読み込むタイプ。

<section class="bg-parts bg7-parts"> <h2>bg7-parts</h2> <p>背景画像タイプ。<br> 背景画像を入れ替えたい場合は、画像をimagesフォルダ内に入れて、cssを調整して下さい。詳しい説明はcssに書いています。<br> 必ずbg-partsとセットで色のclassを指定して下さい。</p> </section>

html

/*bg7-parts ---------------------------------------------------------------------------*/ .bg7-parts { background: url('../images/3.jpg') repeat center center / cover; /*背景画像(3.jpg)の読み込み*/ color: #fff; /*文字色*/ } /*bg-parts（bg7-partsとセットで使います） ---------------------------------------------------------------------------*/ .bg-parts { padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/ } /*背景色が続く場合に隙間を空けない*/ .bg-parts + .bg-parts { margin-top: calc(-1 * var(--content-space-l)) !important; }

css