ヘッダーは、記事、ブログ、Web サイトにとって不可欠な部分です。読者はヘッダーに興味がある場合にのみ、資料内を移動し、顧客は Web サイトをクリックします。したがって、ヘッダーはオンラインでの権威を左右する可能性があります。魅力的なヘッダーから得られる驚くべき利点をいくつか紹介します
魅力的なヘッダーは次のような機能を提供します。
ページのヘッダーは、読者にコンテンツのアイデアを提供します。まったく読まないのではなく、すぐに目を通し、興味のある部分に到達することができます。
検索エンジンは、適切なキーワードが埋め込まれたヘッダーを好みます。よく練られたヘッダーは、SEO ランキングを向上させ、ひいては見込み客、クリック数、売上を向上させるための最良の方法です。
最近の音声検索の傾向が勢いを増しているため、ヘッダーは情報をナビゲートするための貴重なツールとなっています。ユーザーが音声検索を使用して情報を検索すると、検索エンジンが単語を取得し、一致するヘッダーを含む結果を表示します。
ここでは、Astra Pro テーマで素晴らしいヘッダーを構成する方法についてのステップバイステップのガイドを示します。手順に従ってすぐにお好みのヘッダーを作成できます
Astra Pro を使用して、背景画像を含むページ ヘッダーをさまざまな色やパンくずリストで作成できますページ ヘッダーの適合性に応じてサイト ヘッダーをデザインすることもできます。 WordPress Web サイトにAstra ProPlugin
以下の簡単な手順に従って、Astra Pro のpluginを WordPress にインストールしてください。
アストラテーマをインストールする
Astra Pro テーマのモジュール f Page Headers を使用すると、選択した任意のスタイルとデザインでヘッダーを構成できます。これを行うには、以下の手順に従ってください
Astra Pro をインストールした後、WordPress ダッシュボードを開き、[外観] のオプションに移動します。 「Astra Options」でモジュールをアクティブ化します。
WordPress ダッシュボード > 外観 > Astra オプション
ページヘッダーを作成するには、次のように Astra オプションの「ページヘッダー」領域にアクセスします。
外観 > Astra オプション > ページ ヘッダー
ページヘッダーモジュールをアクティブ化した後、設定のオプションに移動してデザインを開始します
設定の下の「外観」タブに「ページヘッダー」のオプションが表示されます。そこから、選択した名前で新しいヘッダーを作成できます。次に、ページ ヘッダー、表示ルール、サイト ヘッダーに使用できるさまざまなオプションを使用してさらにカスタマイズできます。お好みの設定を選択して試して、完璧なヘッダーを作成してください。
Astra Pro は、ページ ヘッダーを設計するための次のドメインのカスタマイズ オプションを提供します。
任意のページ ビルダーでヘッダーを作成している場合は、ページ ヘッダーを作成できます。
Stick:ヘッダーがスティッキーになるかどうかを決定します。
Stick On:ヘッダーをモバイル/デスクトップに貼り付けます。
縮小:ヘッダーをページの上端に貼り付ける場合、このオプションはヘッダーを縮小するかどうかを決定します。縮小効果によりヘッダーの下部と上部のスペースが削除されます
次のレイアウト オプションを使用してページのタイトルを配置することもできます
中央揃え:ページ タイトルとパンくずリスト (アクティブな場合) がページの中央に重なり合うようにします。
このオプションのフロントエンドビューは次のようになります。
インライン:ページのタイトルとパンくずリスト (有効な場合) が右側と左側に表示されます。
このオプションのフロントエンドビューは次のようになります。
このオプションを使用すると、Web サイトにブレッドクラムを表示するかどうかを選択できます。ブレッドクラムはサイトのユーザーの現在の位置を表し、ユーザーがリンク階層内を上から下に移動するのに役立ちます。
このようにフロントエンドに表示されます
ウェブサイト上のパンくずリストのテキストを選択したり、次のように色を選択したりできます。
このようにフロントエンドに表示されます
背景サイズのオプションを使用して、ページのヘッダーの高さを選択できます。ページヘッダーのデザインも強化されるため、便利な追加です。フルサイズのオプションを選択するか、ページヘッダーのカスタムサイズを作成することができます
フルサイズ:このオプションにより、ページヘッダーが全画面を占めることができます。
フロントエンドでは次のように表示されます
カスタム サイズ:カスタム サイズを使用すると、ページ ヘッダーに正の数値で任意のサイズを指定できます。任意の単位とともにヘッダーの下部と上部のパディングを定義することもできます。デフォルトの単位は「%」であり、「6px」などの他のオプションも使用できます。
このようにフロントエンドに表示されます
ヘッダーの背景に任意の色や画像を追加することもでき、ヘッダーをさらに魅力的にすることができます。
カラー:ページヘッダーの背景のオプションに移動すると、ヘッダーの背景に必要な色を決定できるカラーピッカーが表示されます。ページヘッダーを飛び出すお気に入りの色を決めます
画像:カラーと同様に、ページヘッダーの背景に使用する画像を選択できます。
オーバーライド: Astra Pro では、オーバーライド オプションを有効にすることで、ヘッダーの背景画像を注目のブログ/投稿/ページの画像でオーバーライドするオプションも提供されます。
オーバーレイカラー:このオプションを使用すると、ヘッダーに選択した背景色が背景画像にオーバーレイされます。
フロントエンドでは次のように表示されます
Astra Pro は、スクロール中に背景の画像が前景のコンテンツとは異なる速度で移動する視差効果のオプションを提供します。
Astra Pro のこのプレミアム機能を使用すると、選択した特定の投稿またはページにページ ヘッダーを表示できます。ドロップダウン リストから場所を決定し、除外ルールや表示ルールを利用してページ ヘッダーを表示できます。
ページヘッダーをデザインするときに、 Astra Pro Addonpluginを使用するか、基本的な無料の Astra テーマを使い続けるかを検討していますかここでは、魅力的なヘッダーのデザインと作成に利用できる機能の条件を比較します。
| 特徴 | アストラの無料テーマ | アストラ プロ アドオン |
| 透明ヘッダー | ✔️ | ✔️ |
| ブレッドクラム | ✔️ | ✔️ |
| スティックヘッダー | ❌ | ✔️ |
| モバイルヘッダー | ❌ | ✔️ |
| ページヘッダー | ❌ | ✔️ |
| タイポグラフィーとカラー | ❌ | ✔️ |
| プライマリヘッダー | ❌ | ✔️ |
Astra Pro はアドオンplugin、テーマをさらに高度でカスタマイズ可能にします。 Astra Pro は、無料の基本的な Astra テーマでは利用できないさまざまなプレミアム機能を提供します。個人用およびビジネス用の Web サイトに手頃な価格で簡単にアクセスできるテーマを探している場合は、 Astra Pro が選択肢の最上位となるはずです。ぜひチェックしてレビューを残してください。
市場で最も人気のある WordPress テーマの 2 つは、Astra と OceanWP です。プロ…
オンライン ストアのセットアップに関しては、WooCommerce が頼りになるpluginです。それ…