AstraとGutenbergを使用してグラフィックスライダーの表示領域を切り替える

使用中 アストラのテーマ回転ギャラリーを作りたい場合、Elementorのようなページビルダーを使う必要はありません。WordPressのデフォルトのGutenbergエディタとAstraが推奨するSpectraプラグインを組み合わせれば、回転ギャラリーを簡単に実装できる。

このチュートリアルでは、製品紹介、チームプレゼンテーション、ホームページのメイン画像などのシナリオに適した完全なステップバイステップのプロセスを紹介します。

I. 必要な道具

すべて無料：

• Astra Theme: 軽量でカスタムデザインに適しています。
• グーテンベルク・エディター: WordPressにはブロックエディターが付属しています！
• Spectraプラグイン：Astraによって開発され、エディタにさらに高度なブロックを追加する。

設置方法

• バックエンドのプラグインページでSpectraを検索し、インストールして有効にしてください。

• 起動後、Spectraの設定で以下のブロックを有効にしてください：スライダー、コンテナ画像、見出し

グラフィックスライダーモジュールの作成

ステップ1：新規ページの作成または編集

入り込む図頭などのページは、Gutenbergエディタを使って開いてください。

ステップ2：外側コンテナレイアウトの追加

コンテナ・ブロックを追加する：

• 横幅を全幅にする

• 上下に内マージン（例えば60px）を追加する。

• 推奨設定背景色または透明な背景を保持する

ステップ 3: スライダー・ブロックの追加

Spectraが提供するSliderブロックを容器に挿入する：

• デフォルトではスライドの増加

• スライドまたはフェードイン/アウト効果に設定する

• ナビゲーション矢印、ポイントナビゲーション、自動回転を有効にすることができる

ステップ4：各スライドの内容をデザインする

各スライドに2カラムのレイアウトを作成する：

• 画像表示用の右カラム：画像ブロックを使用して、製品やブランドの画像を挿入します。
• 左の列はテキストブロックです：タイトル（高度な見出し）、本文の説明を含みます、ボタン(CTA)

レイアウトの提案

• 画像部分の推奨幅は40%、テキスト部分の推奨幅は60%です。
• 左右の列が中央に揃うように設定し、視覚的なバランスを高める。
• 適切なスペーシングにより、コンテンツがより明確で読みやすくなる

第三に、モバイル・レイアウトの最適化

携帯電話やタブレットで鮮明に表示するには、以下の設定が必要です：

• モバイルデバイスでコンテナを縦向きに切り替える設定

• 画像は上部に、テキストは下部に表示される
• 利用するレスポンシブフォント単位（例：clamp、vw）によるテキストサイズの調整
• 指でタップしやすいサイズと間隔のボタン

Spectraが提供するブロックのほとんどは、デバイスの適応をサポートし、基本的に複雑な処理を必要としない。

IV.スタイル設定の提案

物事をシンプルに美しく保つために、以下の設定を参考にしてください：

• 背景色にライトグレーまたはブランドカラーを使用する

• ページの乱れを避けるため、画像は4:3や正方形など、比率を統一する。
• タイトルは 32~36px本文は以下の通り。 18~20px

• ボタンマウスホバースタイルを追加し、クリックアピールを強化

V. 一般的な使用シナリオ

アプリケーション・タイプ	内容の説明
製品ローテーション	それぞれ、商品画像＋簡単な説明＋ジャンプボタンが表示されます。
チームメンバー	顔写真、仕事内容、個人的なコピー、連絡先ボタンが含まれます。
ブランド・ビジョン・ショーケース	ブランドの使命と基本理念を紹介する3〜5枚のスライド
ホームページヘッダーブロック	ホームページのビジュアルガイドを強化するために、イベント情報やコアサービスのプロフィールを紹介する。

リリースと再利用の方法

編集が完了したら、このスライダーを配置することができる：

• ページの上部または中央にハイライトとして配置する。
• 他のページに素早く挿入できるよう、再利用可能なブロックとして保存する。
• を使用する場合 アストラ・プロカスタムレイアウトモジュールは、指定されたページの構造に追加するために使用することもできます。

まとめ

利用する アストラ Gutenberg + Spectraの組み合わせは、高速ロード、柔軟なデザイン、モバイル適応などの機能を備えたグラフィック回転モジュールを完成させることができます。軽い企業公式サイト、ブランドランディングページ、ブログホームページなどのページ構成に適しています。

原始的で軽量なスライダー表示ソリューションをお探しなら、このアプローチは試す価値がある。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み