frame17-kagu1-white（2026.5公開）

このフレームで使用しているカラーセット。（css/theme.cssで一括置き換えできます）
● ● ●

利用規約

• このテンプレートは、Template Partyにて無料配布しているパーツです。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
• 最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。わざと見えなく加工する事も禁止です。下部の著作を外したい場合はTemplate-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

メイン画像について

cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

画面幅800px以下では、小さな端末向け画像（例：images/mainimg1_s.jpgなど、_s付き画像）が適用されます。この指定は、htmlのsrcsetの部分です。必要に応じて書き換えて下さい。大きな端末用と同じ画像でいい場合は、同じファイル名にしておけばOKです。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。

テキストブロックは、中央、左寄せ、右寄せ、を指定できます。

デモでは、全て左寄せ<div class="text left">になっていますが、右寄せなら<div class="text right">にして下さい。中央はデフォルトなので、<div class="text">とすればOK。

オープニング方法（ワイプ演出（リビール演出））

frame17-kagu1-whiteは、左右中央から、左右に向かって開く動き（観音開き風）になっており、frame17-kagu1-blackは、上下中央から、上下に向かって開く動きになっています。
使い分けは、以下。お好みで設定して下さい。
<div class="mainimg intro-horizontal">（左右中央から開く）
<div class="mainimg intro-vertical">（上下中央から開く）
<div class="mainimg">（イントロなし）

メニューについて

• 画面幅900px未満で開閉メニューになります。ここのブレイクポイントは、main.jsの「const breakPoint = 900;」で変更が可能です。

アイコン画像について（Phosphor Iconsの解説）

headerの３つのアイコンは、Phosphor Icons（Light ウェイト）を使用しています。
Phosphor Icons 公式サイト

上記urlで、画面をスクロールするとアイコンが見えてきます。当テンプレートでは、線の太さを「Light」にしているので、プルダウンから「Light」を選び直して下さい。デフォルトの「Regular」のままだとアイコンをコピーしても表示されません。

具体的なアイコンのコピペ方法や、線の太さを変更したい場合は、当サイトマニュアルをお読み下さい。