Astra Free テーマで全幅またはボックス化されたコンテンツをセットアップする

アストラのテーマ

Astra は、効率的で完全にカスタマイズ可能な WordPress テーマです。 美しく高速であるため、ブログ、ビジネス、個人のポートフォリオ、および WooCommerce ストアフロントに最適です。 軽量なので、ウェブサイトに優れた速度を提供します。 Astra は SEO を念頭に置いて構築されており、Web サイトが検索エンジンで上位にランクされるようになります。 特別な機能とテンプレートを備えているため、Elementor、Divi、Beaver Builder、SiteOrigin、Visual Composer などのページ ビルダーに最適です。

容器

コンテナはコンテンツを表示する領域であるため、 Web サイト上のページは便宜的にコンテナ 簡単に言えば、コンテナはページ全体を囲みます。 コンテンツ領域であってもサイドバーであっても、コンテナーに含まれます。 技術的には、コンテンツ領域をプライマリ コンテナと呼び、サイドバーをセカンダリ コンテナと呼びます。

Web サイト上のコンテナ レイアウトを操作するにはどうすればよいですか?

Astra テーマを使用すると、Web サイト全体にコンテナ レイアウトを適用するのが便利になります。 カスタマイザー オプションを使用してグリッドを設定できます。 これは、[外観] タブにあります: [外観] > [カスタマイザー] > [グローバル] > [コンテナ]。

  • メタ設定から、異なるページや投稿に異なるコンテナを個別に適用することもできます。
  • メタ設定に異なる設定を適用した場合カスタマイザーよりも優先されます。

コンテナの幅

すべての Web サイト コンテンツは、グラフィックであろうとテキストであろうと、この幅内に表示されます。 幅とコンテナのレイアウトを組み合わせることで、さまざまなビューを作成できます。

コンテナのレイアウト

Astra Free テーマでは 4 種類のコンテナ レイアウトが提供されます。 これらはグローバル レイアウトであり、Web サイト全体に適用されます。 さまざまな投稿タイプにさまざまなレイアウトが必要な場合は、専用のコンテナ レイアウトを使用してそれを行うことができます。

ページの「メタ設定」を使用すると、各ページのコンテナ レイアウトをより詳細に制御できます。

コンテナのレイアウトには以下の種類があります。

  • 箱入り
  • ボックス化されたコンテンツ
  • 全幅 / 含む
  • 全幅 / 伸ばした状態
  • 専用コンテナのレイアウト

専用または特定のレイアウト

上記の 4 種類のコンテナ レイアウトは、特定の投稿タイプに対して個別に使用できます。 つまり、デフォルトのレイアウト、たとえばボックス レイアウトを選択し、アーカイブで全幅を選択した場合、サイト全体はボックス レイアウトになり、アーカイブ ページは全幅/包含レイアウトになります。

  • ページ レイアウト – ページのみの場合
  • アーカイブのレイアウト – すべてのアーカイブ
  • ブログ投稿のレイアウト – ブログ アーカイブおよび単一のブログ投稿ページ用

Astra テーマは、多くの人気のあるpluginとの統合を提供します。 これらのpluginAstra との統合を提供します。

ウーコマース

EDD (Easy Digital Downloads)

ラーニングダッシュ

リフターLMS (3)

上記のpluginがインストールされている場合、それらのpluginページの専用コンテナ レイアウト オプションにもアクセスできます。

Astra Pro アドオンpluginの専用モジュールは、より高度なオプションを提供します。 Astra Pro アドオンpluginの専用モジュールには、次のオプションが含まれています。

  • ページのメタ設定は、コンテナのレイアウトよりも優先されます。 メタ設定の優先順位はカスタマイザー設定よりも高くなります。
  • サイト レイアウト設定により、コンテナの幅が決まります。

コンテナレイアウト/全幅レイアウト

全幅コンテナ設定は、ドキュメントにあるカスタマイザー設定

ドキュメント » カスタマイザー設定 » グローバル » 全幅 / 含まれる – コンテナー レイアウト

前に説明したように、Web サイトには 2 つのコンテナーを含めることができます。 一次コンテナと二次コンテナ。

プライマリ コンテナは、メイン コンテンツが表示されるページです。

セカンダリ コンテナは、サイドバーとサイドバー内のさまざまなウィジェットを構成します。

「全幅 / 含まれた」レイアウトを使用すると、プライマリ コンテナとセカンダリ コンテナを組み合わせることができます。 これらのコンテナは、より整然とした外観を得るために 1 つのコンテナ内に表示できます。 「全幅 / 含まれる」レイアウトでは、コンテンツとサイドバーが 1 つのコンテナー内に並べて表示されます。 このコンテナはコンテナの幅で表示されるため、コンテナの周囲にスペースが残ります。

コンテナ設定は、[外観] に移動して次のパスに従うことで変更できます。

外観 > カスタマイズ > グローバル > コンテナ

全幅 / 含まれたレイアウトは、ボックスやグリッド境界のない、整ったデザインが必要な Web サイトに最適です。 このレイアウトは、WooCommerce、LifterLMS などのpluginとの統合を通じてデフォルトとして設定できます。

Visual Composer などの多くのページ ビルダーでは、コンテナの幅を制御するためにテーマが必要です。 同じ理由で、全幅/包含レイアウトを推奨しています。

Astra Pro Addonpluginの専用モジュールは、より多くのスタイル オプションを提供します。

コンテンツボックス – コンテナレイアウト

ドキュメント » カスタマイザー設定 » グローバル » コンテンツ ボックス – コンテナ レイアウト

通常、Web サイトには 2 つのコンテナーを含めることができることを前に説明しました。

プライマリコンテナ: メインコンテンツが表示される場所

セカンダリ コンテナ: サイドバーとさまざまなウィジェットで構成されます。

「コンテンツボックスレイアウト」を選択すると、プライマリコンテナのみがボックス形式で表示されます。 それにもかかわらず、2 番目のコンテナは無地の背景のままになります。

Web サイトのコンテンツ領域をサイドバーよりも目立つようにしたい場合は、このレイアウトを選択するのが理想的です。 簡単に言えば、コンテンツ ボックス レイアウトはコンテンツ Web サイトやブログに最適です。

ボックス レイアウトの設定は次のとおりです。

 外観 > カスタマイズ > グローバル > コンテナ

さらに、ページごとに異なるコンテナを適用したい場合は、メタ設定から行うことができます。

  • コンテンツ ボックス コンテナーは、メタ設定から選択したページまたは投稿に適用できます。
  • サイト レイアウト設定により、コンテナの幅が決まります。
  • Astra Pro アドオンpluginの助けを借りて、色と背景モジュールを通じてサイトの背景色を変更できます。 ただし、Astra Pro をお持ちでない場合は、カスタム CSS を使用して背景画像を追加することもできます。

アストラフリーテーマの特徴

アストラは間違いなくエレメンターにとって最高のテーマです。 Elementor との連携が優れているため、Web サイト構築に最適な無料テーマとなっています。 以下では、Astra を最高のテーマにする特徴について説明しました。

全幅/拡張レイアウト

Astra は、Elementor 用に特別に作成された全幅/拡張レイアウトを提供します。 このレイアウトを使用すると、Elementor はレイアウトを完全に制御できるため、行やセクションを全幅に拡張するために複雑な JavaScript メソッドを組み込む手間から解放されます。

Astra を使用すると、サイドバー、ページ タイトル、パンくずリスト、およびアイキャッチ画像を非常に簡単に無効にして、Elementor で完全に自由にデザインすることができます。 これらの機能を無効にすると、空白のキャンバスが得られ、Web サイトをゼロから希望通りにデザインできるようになります。 カスタムのランディング ページを作成し、Astra のヘッダーとフッターを無効にして、Elementor がページを完全に制御できるようにすることもできます。

ほとんどのテーマはこれらの機能をデフォルトで出力するため、サイトをデザインするユーザーの制御が制限されます。

カスタマイザーからのグローバル オプション

Astra グローバル オプションを使用すると、Elementor に適した必要なレイアウト、サイドバー、その他のカスタム設定をカスタマイザーで直接設定できます。 グローバル オプションは、ほとんどのページが Elementor でデザインされている Web サイトを構築している場合に特に理想的です。

繰り返しますが、個々のページに異なる設定が必要な場合、グローバル オプションはこれらの個々の設定によってオーバーライドされます。

Elementor Pro 2.0互換

Astra は、Elementor 2.0 テーマ ビルダーと完全に互換性のある数少ないテーマの 1 つです。 Astra と Elementor Pro 2.0 テーマ ビルダーを使用すると、Web サイトのあらゆる側面をマイクロデザインできます。 別のヘッダー、フッター、ブログ テンプレート、またはその他のものを選択する場合でも、これら 2 つの強力なツールを使用して、思いどおりに操作できます。

エレメンターの統合

Astra は、Elementor とのスマートな統合を提供します。 Elementor を使用してページを作成している場合、Astra は Elementor に最適なオプションを自動的に設定します。 このスマートな統合により、多くの時間とエネルギーが節約され、他の重要なことに費やすことができます。

Astra では 30 種類以上のヘッダー、10 種類以上のフッターを提供しています。 透明なヘッダーか無地のヘッダーかを選択できます。 Astra Pro アドオンを使用すると、カスタム要件に従って elementor でヘッダーを最初から構築することもできます。

モバイルヘッダーのオプション

Astra を使用すると、モバイル対応サイトを作成できます。 Astra は、カスタマイザーでの設定が非常に簡単な、モバイル対応メニューの便利なソリューションを提供します。 これにより、美しいモバイル メニューを制御およびデザインすることができます。 カスタム コードを使用せずにメニュー全体を構築できます。

軽量で膨らみません

アストラはエレメンターにサポートを提供します。 これは、Astra が elementor によって提供される機能を複製しないことを意味します。 Astra は軽量でモジュール式のテーマです。 グローバル カラー、タイポグラフィ、スタイリング、サードパーティのpluginイン統合などの装飾を処理します。 それにもかかわらず、Elementor はページ構築部分を処理します。

アフマド

コメントを見る

  • コンテナのカスタマイズについて質問があります。 幅の調整が可能です。 しかし、コンテナボックス(ブロック)の高さを調整する方法はどこにも書かれていません。 私のサイトには白が多すぎます。 本文テキストが配置されているブロックの高さを低くして、本文テキストをヘッダーに近づけたいと考えています。

    • こんにちは。高さの設定はありません。高さはすべてのページ セクションのコンテンツ + 余白によって定義されます。 あなたの場合、ヘッダーまたは最初のセクションのマージン/パディングの問題だと思います。

最近の投稿

Elementor でヘッダーとフッターを使用する方法

Web サイトのヘッダーとフッターは重要な要素です。 ほとんどの場合、ヘッダーはナビゲーションを提供します…

2022 年 1 月 6 日

WordPress テーマの比較: Astra と OceanWP

市場で最も人気のある WordPress テーマの 2 つは、Astra と OceanWP です。 プロ…

2022 年 1 月 2 日

WordPress ニューステーマの比較: 新聞 vs. アストラ

優れたニュース Web サイトを作成するには、Web デザイナーになる必要はありません。 私たちは…

2021年10月25日

新聞をテーマにしたニュース関連の Web サイトを作成する

新聞テーマは、tagDiv によって設計された最も重要な WordPress テーマの 1 つです。

2021年10月18日

Avada WooCommerce ビルダーを使用して e コマースを構築する方法

オンライン ストアのセットアップに関しては、WooCommerce が頼りになるpluginです。 それ…

2021年10月4日

Elementor でスティッキーヘッダーとスクロール効果を使用する方法

ヘッダーは通常、Web サイトにアクセスしたときに最初に目にするものです。

2021年9月21日