アストラ このテーマは強(qiáng)力なレスポンシブ編集機(jī)能で構(gòu)築されており、ウェブデザイナーや開発者がウェブサイトのレイアウトを簡単に調(diào)整し、デスクトップ、タブレット、攜帯電話などの異なるデバイス上で完璧なものにするのに役立ちます。

レスポンシブデザインとは何か？

レスポンシブデザインとは、ウェブページのレイアウトやコンテンツを異なるデバイスの畫面サイズや解像度に自動(dòng)的に適応させることを指します。複數(shù)のバージョンのウェブサイトを作成する代わりに、レスポンシブデザインのテクニックを使用して、コンテンツがすべてのデバイスでスムーズに表示されるようにすることができます。Astraのテーマは、次のように設(shè)計(jì)されています。 アストラ レスポンシブ編集ツールは、異なる畫面サイズでのウェブサイトのパフォーマンスを簡単に管理するために提供されています。

Astraテーマのレスポンシブ編集機(jī)能

1. さまざまなデバイス用にデザインをプレビュー、編集

アストラ このテーマはデバイスプレビュー機(jī)能を提供し、編集過程でデスクトップ、タブレット、攜帯電話の効果を直接見ることができます。具體的な手順は以下の通りです：

• Astra Customiserに移動(dòng)し、編集する設(shè)定を選択します。
• レスポンシブ編集のアイコンを見つけて、デスクトップ、タブレット、モバイルのデバイス表示を切り替えます。

• 各デバイスビューで適切な設(shè)定を調(diào)整し、ウェブサイトが異なるデバイスでの表示に最適化されるようにします。

2. レスポンシブ?デザインの設(shè)定

とおす アストラ テーマのカスタマイザーは、ほぼすべての設(shè)定でレスポンシブ編集をサポートしています。特に含まれるもの

• フォントサイズと色デバイスごとに異なるフォントサイズと色を設(shè)定し、優(yōu)れた読書體験を保証します。
• ボーダーの色とスタイルデバイスの種類によって異なるボーダースタイルとカラーを調(diào)整することで、どの畫面でも洗練されたデザインになります。
• アイコンのサイズ、色、間隔アイコンの設(shè)定は、デバイスごとに個(gè)別に調(diào)整することができ、どのような畫面でもアイコンが表示されるようにすることができます。
• 背景色、オーバーレイ、畫像デバイスの種類ごとに異なる背景効果をカスタマイズし、視覚的な階層を強(qiáng)化します。
• 內(nèi)マージンと外マージンまた、デバイスごとに異なる間隔を設(shè)定することで、コンテンツレイアウトをより洗練されたものにすることができます。

3. 相対単位を使用したレスポンシブ?デザイン

レスポンシブ?デザインの鍵のひとつは、適切なサイズのユニットを選ぶことだ。アストラ PX（ピクセル）、EM（相対単位）、%（パーセント）の3つの一般的な単位がサポートされています。これらの単位の選択は、ウェブ要素が異なるデバイスでどのように表示されるかに直接影響します：

• PX（ピクセル）正確なサイズコントロールに適しており、通常デスクトップデザインで使用されるが、小さな畫面ではエレメントが表示範(fàn)囲から外れてしまうことがある。
• EM（相対単位）ボタンや見出しのサイズなど、動(dòng)的に調(diào)整する必要がある要素に適しています。
• %（パーセント）親要素の寸法に関連し、レイアウト要素の幅や高さの調(diào)整に適用されます。

これらのユニットを巧みに利用することで、デスクトップとモバイルデバイスの両方で適切なレイアウトと表示を確保することができる。

Astraテーマのレスポンシブヘッダーとフッター

レスポンシブデザインはページコンテンツだけのものではない。アストラ このテーマのヘッダーとフッターは、デバイスの種類に応じてカスタマイズすることもできます。一般的なレスポンシブデザインをご紹介します：

• ロゴの幅を調(diào)整するデスクトップとモバイルで異なるロゴ幅を設(shè)定し、それぞれのデバイスで適切なサイズが表示されるようにします。

• タイトルとバナーのフォントと色デバイスの種類によって異なるフォントサイズと色を設(shè)定することで、サイトのブランドアイデンティティがより際立ちます。

• ヘッダーとフッターの高さヘッダーとフッターの高さは、デバイスの種類によって異なる畫面サイズに合わせて調(diào)整できます。,,
• さまざまなウィジェットを追加するモバイル端末では、簡易ナビゲーションメニューやソーシャルメディアリンクを表示するなど、端末の種類によってウィジェットを追加したり非表示にしたりすることができます。

• エレメントの再編成と再配置例えば、メインメニューをページの一番下に移動(dòng)させたり、特定のアイコンを非表示にしたりすることで、モバイルでのユーザーエクスペリエンスを向上させることができます。

レスポンシブ?デザインの隠れた要素

ユーザーはアストラ このテーマはレスポンシブ編集時(shí)に特定の要素を非表示にします。例えば、デバイスの種類に応じて特定のコンテンツやレイアウト要素を選択的に非表示にすることができます：

• ある ヘッダービルダー もしかしたら フッタービルダー で、各デバイスビューに対して個(gè)別に表示/非表示を設(shè)定することができます。
• 例えば、ページのレイアウトをシンプルにするために、モバイル端末では特定の大きなアイコンや複雑なメニュー項(xiàng)目を非表示にするオプションがある。

結(jié)語

アストラ このテーマのレスポンシブデザイン機(jī)能により、ウェブサイトは複數(shù)のデバイスでより優(yōu)れたパフォーマンスを発揮します。合理的な調(diào)整と最適化を行うことで、ページの美観を向上させ、異なるデバイスで閲覧する際のユーザー體験の一貫性を確保することができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み