デザイン試作中

わたしたちが選ばれる[br-xs]3つの理由

REASON

01

見出しを入れてください

ここにはカラムのテキストを入れてください。ここにはカラムのテキストを入れてください。ここにはカラムのテキストを入れてください。

REASON

02

見出しを入れてください

ここにはカラムのテキストを入れてください。ここにはカラムのテキストを入れてください。ここにはカラムのテキストを入れてください。

REASON

03

見出しを入れてください

ここにはカラムのテキストを入れてください。ここにはカラムのテキストを入れてください。ここにはカラムのテキストを入れてください。

全幅 カラム背景塗りなし

文章入力エリアの左右に余白があります。ブロックパターンの組み合わせはブロックの機能だけでなく、各ブロックの「高度な設定」にcssクラスを割り振って独自のcssを当てるとデザイナーさんがいろいろと力を発揮できる分野ではないかと思います。

全幅 カラム背景塗りなし

文章入力エリアの左右に余白があります。ブロックパターンの組み合わせはブロックの機能だけでなく、各ブロックの「高度な設定」にcssクラスを割り振って独自のcssを当てるとデザイナーさんがいろいろと力を発揮できる分野ではないかと思います。

【2023/11/16 進捗】
・レビューの埋め込み→プラグインを用いて実装成功

・在庫を管理する仕組み→調査中、プラグインが使えるらしい?投稿ページを商品データとして扱えるらしい?(※詳細を確認中です)

・画面レイアウト→ワードプレスの各ブロックで再現できるものと、HTMLを手入力した方が楽(効率的、または正確にデザインできる)ものを切り分け中

・画面下部のフローティングバナー→なぜかアイコン画像が横並びにならない。フレックスボックスの設定を修正中



(2023/11/16)
プラグインを使用して、レビュー(グーグルの口コミ)の埋め込みに成功。情報収集から約30分で成功。ダミーデータとして、東京駅の口コミを表示しています。
これは表示テストを優先しているので、素っ気ないデザインですが、何パターンかデザインを選べます。(ただ、カラフルなデザインや派手なデザインは用意されていないようです)

問題点:flex boxが横並びにならない(フローティングバナーとして表示されない)

表示テスト中:画面幅いっぱいに広がるバナー

(2023/11/17)ネットから拾ってきたコードをコピペ。改めてCSSなどを直して移植
ピンク色の帯がブラウザの両端に広がっていれば成功です。

親要素はブラウザに対して中央寄せに

子要素に margin: 0 calc(50% – 50vw) を1行追加!

↓ワードプレスの『カラム』で表示テスト。全幅設定で、どのように表示されるか確認中(もしかしてHTMLを手入力で書いた方が確実?)