を使用している場合は ワードプレス ウェブサイトを構築していて、見栄えがよく機能的な商品紹介ページを作りたいが、コードが書けない。ブロックシー テーマは、まさにそのためのツールです。この記事では、商品ショーケースのページをすばやく完成させるために、Blocksy テーマをステップバイステップでご紹介します。
![图片[1]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620163853316-image.png)
なぜブロックジーなのか?
![图片[2]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620163716714-image.png)
Blocksyは無料で軽量、カスタマイズ可能なWordPressテーマです。それは グーテンベルク エディターやElementorのようなページビルダーとうまく連携できる。Blocksyを使えば、これが可能になります:
- ページ構成とレイアウトのカスタマイズ
![图片[3]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185808948-image.png)
- フルワイドまたはカセットインナーパッケージのセットアップ
![图片[4]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185850900-image.png)
- 商品画像、プロフィール、価格などのモジュールを追加します。
![图片[5]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620191537899-image.png)
- カードスタイルで複数の商品情報を表示
II.準備作業
作業を始める前に、以下の作業を完了してください:
1.Blocksyテーマをインストールして有効にする
バックステージ → 外観 → テーマ → テーマの追加 → 「Blocksy」を検索し、インストールをクリックして有効にする。
![图片[6]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620190448661-image.png)
2.Blocksy Companion プラグインをインストールする
インストール後、Blocksy Companionプラグインを有効化するよう促されますので、クリックして確認します。このプラグインは追加のモジュールとページテンプレートを提供します。
![图片[7]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620190350499-image.png)
3.製品素材の準備
事前に製品写真タイトル、価格、特徴などを素早く編集できる。
第三に、新しい商品表示ページである。
- 新規ページ作成
バックエンド → ページ → 新規作成 → 「商品ショーケース」など、ページ名を入力してください。
![图片[8]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620183618859-image.png)
- セットアップページテンプレート全幅レイアウト
ページの右側にある設定欄で、テンプレートを「Blocksy - Full Width Page」として選択します。
![图片[9]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620184355420-image.png)
- 表示コンテンツの追加
Gutenbergエディタを推奨:
- カラム」モジュールの挿入(例:2カラム、3カラム構造
![图片[10]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185002779-image.png)
- 各欄に画像、タイトル、紹介文、「今すぐ購入」などのボタンを追加する。
また、「Media & Text」モジュールを使用して、グラフィックとテキストを明確に並べて表示することも可能です。
![图片[11]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185138833-image.png)
あるいは、ブロックジーの スターターサイト テンプレート機能:
- ブロックシーへ → スターターサイト
![图片[12]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620175334888-image.png)
- 商品ショーケース(例:「ショップ」や「ビジネス」)のあるデモサイトテンプレートを選択してください。
- ワンクリックでインポートし、コンテンツの内容を直接修正できる
![图片[13]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620191953534-image.png)
IV.スタイルの詳細を調整する
- 配色とフォントの変更
外観 → カスタマイズ → 色とフォント で、背景色、ボタンの色、テキストのスタイルなどを設定できます。
![图片[14]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185353246-image.png)
- 画像の角丸とシャドウ効果を有効にする
ブロックのスタイル設定では、角を丸くしたり、画像にカードシャドウをつけたりして、より美しいページにすることができます。
![图片[15]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185501721-image.png)
- 様々なデバイスへのページの適応
ブロックジーはレスポンシブレイアウト機能、余分な設定なし、ページは携帯電話やタブレット、その他の端末に適応可能。
V. ページの公開とメニューの管理
デザインが完成したら、ページの右上にある「公開」ボタンをクリックします。その後、外観 → メニューを開き、メインサイトにページを追加します。ナビゲーションメニュー訪問者が製品情報を閲覧しやすい。
![图片[16]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620190110615-image.png)
まとめ
ブロックシー このテーマを使えば、すべてのWordPressユーザーが商品ショーケースのページを簡単に作成することができます。テンプレートの選択から、コンテンツの追加、スタイルの調整まで、開発スキルを必要とせず、簡単な操作だけで完成させることができます。一つの商品を表示する場合でも、複数の商品情報を表示する場合でも、プロレベルの視覚効果を得ることができます。
今すぐバックエンドを開き、Blocksyを使って独自の商品ショーケースページを作成しましょう。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:[email protected] | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/61508/この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。





















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし