parallax & slide – パターンとパーツの作成工房

Pensa a qualcosa da scrivere

02 / Architecture

低く、深く、
街へ構える。

外観に求めたのは、派手さではなく、長く見つめられる佇まい。

コンクリート打放しの質感と、落ち着いた色調の外観が、街並みの中で低く、深く、構えをつくります。

素材の表情は抑え、建物の線と陰影で存在感をつくる。ここでは写真を切り替えるのではなく、建築の面そのものとして見せます。

下記のBlockを探す
<div class=”bw-wipe-visual” aria-label=”スクロール連動ワイプ画像”>
<img
class=”bw-wipe-img bw-wipe-img–1″
src=”http://create.breakwize.com/wp-content/uploads/2026/05/para-bar03.jpg“
alt=”最初に表示する画像”
loading=”eager”
>
src=の部分をメディアライブラリで入れたい画像を3枚分URLをコピーして入れれば変更される

文字を編集するにはhtml内の文字を差し替える

以下の部分を検索
style=”–bw-bg:var(–global-palette9,#f5f1e8); –bw-sticky-top:0px;”
テーマ依存のままでよければ、このまま。
palette9の番号を変えればOK
色を固定したければ、以下の様に色コードを指定
style=”–bw-bg:#f3eee6; –bw-sticky-top:0px;”

–bw-sticky-top:0px;
これを下記の様にmarginをとる
–bw-sticky-top:70px;

このHTMLでは、見出しを普通の h2、小見出しを h3 にしています。

<h2>低く、深く、<br>街へ構える。</h2>
<h3>外観に求めたのは、派手さではなく、長く見つめられる佇まい。</h3>

なので、文字の雰囲気は基本的にテーマ側で変更します。

外観
→ カスタマイズ
→ 一般
→ タイポグラフィ
→ H2 / H3

ここで変更すれば、このセクションにも反映されます。

このHTMLでは、見出しを普通の h2、小見出しを h3 にしています。

<h2>低く、深く、<br>街へ構える。</h2>
<h3>外観に求めたのは、派手さではなく、長く見つめられる佇まい。</h3>

なので、文字の雰囲気は基本的にテーマ側で変更します。

外観
→ カスタマイズ
→ 一般
→ タイポグラフィ
→ H2 / H3

ここで変更すれば、このセクションにも反映されます。

左でワイプするsection

右エリアは通常通りBlockエディタで編集可能。ボタンなども設置できる

CTA

左でワイプするsection

右エリアは通常通りBlockエディタで編集可能。ボタンなども設置できる

CTA

–bw-sticky-top:0px;
これを下記の様にmarginをとる
–bw-sticky-top:70px;

HTML内のここです。

--bw-narrow-height:260vh;

短くする：

--bw-narrow-height:220vh;

ゆっくり見せる：

--bw-narrow-height:300vh;

まずは 260vh のままでOKです。

上のwipeSectionhの作り方と設定の仕方はメモの「WordPressで画像のwipeレイアウトをつくる」に記述してある

Pensa a qualcosa da scrivere

Pensa a qualcosa da scrivere

低く、深く、街へ構える。

外観に求めたのは、派手さではなく、長く見つめられる佇まい。

左でワイプするsection

左でワイプするsection

コメントを残す コメントをキャンセル

低く、深く、
街へ構える。

コメントを残すコメントをキャンセル