見事なアストラテーマのヘッダーを作成するには?

ヘッダーは、読者だけでなく検索エンジンにもサービスを提供するため、Web ページ上のあらゆるコンテンツにとって不可欠です。美しくよく書かれたヘッダーは、読者を投稿に引き付け、クリック数を増やす可能性があります。ヘッダーの範囲は、コンテンツの階層に応じて H1 から H6 までです。ページまたは記事のメイン タイトルは H1 ですが、H2 はドキュメント内のセクションを構成する小見出しです。 H3 から H6 ヘッダーは、H2 の下の文書にさらに小見出しを提供します。 Astra テーマがコンテンツ内に魅力的なヘッダーを作成するのにどのように役立つかに進む前に、ヘッダーの重要性について考えてみましょう。

目次:

• Web ページにとってヘッダーが重要なのはなぜですか?
• 1. トピックの特定
• 2. アクセシビリティ
• 3. 検索エンジンの最適化
• 4. ページをスキャン可能にする
• 5. モバイルデバイスの使いやすさ
• Astra テーマで素晴らしいヘッダーを作成するには?
• ヘッダーに Astra テーマを使用することの長所と短所
• 最後の言葉

Web ページにとってヘッダーが重要なのはなぜですか?

テキストにヘッダーを必ず含める必要がある理由は次のとおりです。

1. トピックの特定

ヘッダーは、検索エンジンと読者が記事内で探しているキーワードを選択するために重要な役割を果たします。テキストの主要なヘッダーは内容のトピックを識別するのに役立ち、小見出しは読者を興味のある分野にナビゲートします。

2. アクセシビリティ

今日、人々はほとんどの場合、コンテンツを閲覧するためにスクリーン リーダーを使用します。コンテンツ内のヘッダーはスクリーン リーダーで簡単に認識できるため、スクリーン リーダーを効果的に使用するためには不可欠です。また、読者はある見出しから別の見出しにジャンプして、必要なトピックに到達することもできます。

3. 検索エンジンの最適化

ヘッダーによってトピックが識別可能になると、検索エンジンは検索クエリに対してページをランク付けします。ヘッダーを綿密に作成し、適切なキーワードを埋め込むほど、検索エンジンのランキングが向上します。

ここでは、無料の Astra テーマ機能を使用してページの素晴らしいヘッダーを作成するためのガイドを示します。手順に従って任意のヘッダーを作成します。

4. ページをスキャン可能にする

ヘッダーを使用すると、ページを可能な限りスキャンしやすくなります。誰も記事全体、特に一行一行を読む人はいないというのは周知の事実です。そのため、ページにヘッダーがあることが重要です。すべてのヘッダーの中で最も重要なヘッダーは最初のヘッダーであり、投稿またはページ全体のトーンを決定します。

次に、コンテンツを消費しやすいチャンクに分割する小見出しが続きます。それだけでなく、記事の構造はヘッダーとサブヘッダーによって示されます。つまり、適切なヘッダーのセットは、魅力的なコンテンツで視聴者を引き付けることができることを意味します。

5. モバイルデバイスの使いやすさ

時間の経過とともに、モバイルはこれまで以上に主流になってきています。サイトがモバイルからこれまで以上に多くのトラフィックを獲得することは間違いありません。したがって、コンテンツを適切に配置すれば、デスクトップだけでなくモバイルからも視聴者を獲得できるはずです。

つまり、ヘッダーは、読者だけでなく検索エンジンのためにも Web ページを最適化します。

Astra テーマで素晴らしいヘッダーを作成するには?

まず最初に、Astra Header Builder にアクセスするには、WordPress ダッシュボードにログインし、次の図に示すように[Appearance] > [Astra Options] > [Header Builder]

それをクリックすると、WordPress カスタマイザーのヘッダー ビルダー セクションに移動します。インターフェイスはここにあるものと似ているはずです。

ご覧のとおり、ヘッダー ビルダーは 3 つの垂直セクションに分割されており、1 つは別のセクションの上に積み重ねられています。中央に「プライマリヘッダー」があり、上部に「ヘッダーの上」、下部に「ヘッダーの下」があります。 

各ヘッダーには独自の「ヘッダー設定」のセットがあり、ヘッダーの左側にある歯車アイコンをクリックするとアクセスできます。

ここから、ヘッダーの高さ、境界線のサイズ、背景、パディング、マージンをカスタマイズできます。

また、各ヘッダーが 3 つのセクションにどのように分割されているかにも注目してください。これらのセクションのヘッダー要素を追加または削除して、機能をさらに高めることができます。このチュートリアルの執筆時点では、12 個のヘッダー要素にアクセスできます。

• サイトのタイトルとロゴ
• プライマリーメニュー
• ボタン1
• ボタン 2 (プロ)
• 検索
• アカウント
• HTML1
• HTML2
• 二次メニュー
• 社交
• ウィジェット 1
• ウィジェット 2
• ウィジェット 3 (プロ)
• ウィジェット 4 (プロ)
• ショッピングカート

ここで、新しいヘッダー要素を追加するには、そのセクションの上にマウスを置き、「+」ボタンをクリックします。これにより、使用可能な要素のリストが表示されます。使用したいものを選択すると、ヘッダー セクションに追加されます。

同様に、ヘッダー要素の横にある「x」ボタンをクリックするだけでヘッダー要素を削除できます。

ドラッグ アンド ドロップするだけで、ヘッダー セクション間でヘッダー要素を移動することもできます。

使用したすべてのヘッダー要素は、左側のメニューの [全般] タブのすぐ下に表示されます。ここには、ヘッダーの種類を変更するオプションもあります。無料ユーザーは「透明ヘッダー」のオプションのみを利用できます。ただし、Astra Pro を使用している場合は、「Sticky Headers」を有効にすることができます。

ここから、ヘッダー要素の特定の設定にアクセスできます。

「全般」タブのすぐ隣に「デザイン」タブがあります。ここから、ヘッダーの幅とマージンを変更するためのいくつかの基本的なデザイン オプションが表示されます。 Astra Pro ユーザーは、より高度な設定を利用できます。

Astra Header Builder を使用すると、デスクトップ、モバイル、タブレットなどのさまざまな画面サイズでサイト ヘッダーがどのように表示されるかを微調整することもできます。別の画面サイズを選択してカスタマイズするには、画面の左下隅にあるデバイス セレクターを使用します。

ご覧のとおり、小さい画面では「オフ キャンバス」と呼ばれる追加領域が表示されます。これにより、ヘッダーのスペースを節約し、一部の要素を画面外に移動し、訪問者が必要に応じて切り替えることができます。

これで、Astra テーマを使用してヘッダーを作成する方法に関するクイック ガイドは終わりです。すべての Header 要素を追加し、必要なデザイン変更を行ったら、[公開] ボタンをクリックするだけで完了です。 

新しく作成された Astra ヘッダーが WordPress Web サイト上で稼働します。

Astra Header Builder: 利用可能なオプションの概要

上記のチュートリアルでは、機能がどのように機能するかを理解するために、Astra Header Builder を使用して非常に基本的なヘッダーを作成しました。ただし、Astra Header Builder には、より複雑で魅力的なヘッダーの作成に役立つツールやオプションが多数あります。

ここでは、自由に使用できるさまざまなオプションを簡単に説明します。

プライマリヘッダー

Astra のデフォルトのヘッダーはプライマリ ヘッダーです。ロゴと、Astra のさまざまな主要ヘッダー設定でカスタマイズ可能なナビゲーション メニューが表示されます。

Astra をインストールし、[ヘッダー] セクションに移動してプライマリ ヘッダー オプションを選択し、カスタマイズに進みます。ヘッダー > プライマリヘッダー

次のカスタマイズ設定を利用できます。

レイアウト

レイアウト設定は、ページのロゴの位置を管理します。 Astra ではロゴに 3 つの異なる位置を使用できます。

左のロゴ

この設定のロゴは、ナビゲーション メニューの左側に移動します。ロゴを配置する典型的なスタイルです。

右のロゴ

この設定のロゴは、ナビゲーション メニューの右側に移動します。

センターロゴ

この設定のロゴは、ナビゲーション メニューの上の中央に移動します。長いメニューの場合に最適なオプションです。

幅

幅設定は、テキストのヘッダーの幅を管理します。ヘッダーの幅を次のようにカスタマイズできます

全幅

全幅設定では、ヘッダーは両端から引き伸ばされ、ブラウザーのページ サイズに合わせて表示されます。

コンテンツの幅

コンテンツの幅の設定では、設定したコンテナの幅に応じてヘッダーが調整され、以下を選択することで設定できます。

グローバル > コンテナ > 幅

国境

境界線を選択すると、ヘッダーの下に境界線を追加し、その色と幅をカスタマイズできます。

モバイルヘッダー

応答性の高いデバイスでは、ナビゲーション メニューがハンバーガーに変わります。したがって、これらのデバイスのプライマリ ヘッダーにはハンバーガー メニューとロゴのみが表示されます。レスポンシブウィジェットのメニューに関するロゴのレイアウトをカスタマイズできます。

スタック

スタックオプションでは、ロゴがハンバーガーメニューの上に移動します。大きなロゴがある場合は、スタックを選択すると便利です。

列をなして

インライン オプションでは、ロゴとメニューが一直線に並ぶため、ロゴが小さい場合に適しています。

カラーテーマ

プライマリ ヘッダーは、Astra テーマを使用してさまざまな色で表示できます。グローバル カラーは無料で利用できますが、より高度な機能を利用するには Astra Pro のアドオンpluginを使用する必要があります。 Astra でグローバル カラーを使用するには、[外観] タブに移動し、[カスタマイズ]、[グローバル] の順に選択し、最後に色のオプションを選択する必要があります。外観 > カスタマイズ > グローバル > カラー

タイポグラフィ

ページまたはサイトのタイポグラフィ設定は、Astra テーマのプライマリ ヘッダーに自動的に適用されます。グローバルの下の「外観」タブに移動して、タイポグラフィ設定を選択およびカスタマイズできます。 

外観 > カスタマイズ > グローバル > タイポグラフィ

透明ヘッダー

透明ヘッダーを使用すると、ページに美しく魅力的なヘッダーを簡単に作成できます。プライマリヘッダーの背景は透明に設定され、ページのコンテンツが上部に表示されます。ページのコンテンツとプライマリ ヘッダーがマージされます。つまり、コンテンツの上部が透明なヘッダーの背景になります。たとえば、画像がページの上部にある場合、その画像は上部に表示され、透明なヘッダーの背景になります。

透明なヘッダーを追加するにはどうすればよいですか?

透明なヘッダーは 2 つの簡単なステップで作成され、ページを魅力的にします。 

ステップ1

カスタマイザーの下に透明ヘッダーのオプションがあり、編集できます。

外観 > カスタマイズ > ヘッダー > 透明ヘッダー

ステップ2

透明ヘッダー オプションでは、Web サイト全体で有効にし、下部の境界線、配色、ロゴ レイアウトを選択できます。

完全な Web サイトでの有効化

Web サイト全体で透明なヘッダー設定が必要な場合は、チェックボックスをオンにしてこのオプションを有効にできます。チェックボックスをオンにしても、特定の投稿またはページに対して有効にできる除外ルールがいくつかあります。次のページの透明ヘッダー オプションを無効にできます。

アーカイブ、検索、および 404 で無効にする

これらの特別なページでは、チェックボックスをオンにすることで、透明ヘッダーの設定を無効にすることができます。

ブログインデックスページで無効にする

ホームページから設定を変更すると、ブログのトップ ページがブログ インデックス ページになります。ブログインデックスページを作成するには、ホームページ設定に移動し、「ホームページの表示」タブで「最新の投稿」を選択します。

ホームページの表示 > 最新の投稿

このブログインデックスページの透明ヘッダーの設定を無効にしたい場合は、チェックボックスをチェックしてください。

ページで無効にする

すべてのページで透明ヘッダーのオプションを無効にする場合は、チェックボックスをオンにします。

投稿で無効にする

すべての投稿で透明ヘッダーのオプションを無効にする場合は、チェックボックスをオンにします。

色と背景

次の利用可能なオプションを使用して、透明ヘッダーの背景と色の設定をカスタマイズできます。

• 背景
• サイトタイトル
• メニュー
• サブメニュー
• コンテンツ

ヘッダーに Astra テーマを使用することの長所と短所

長所

• 透明ヘッダーの機会が利用可能です
• 全幅とコンテンツ幅の両方のヘッダーが使用可能です 
• 色とタイポグラフィーのカスタマイズが可能です

短所

• スティッキーヘッダーオプションは使用できません
• 高度なカラー機能は利用できません

最後の言葉

アストラは最高のテーマの 1 つです。また、それを使用している場合は、サイトを維持するための正しい道を進んでいることになります。

Astraの無料テーマを使用すると、 Web ページの美しく魅力的なヘッダーをデザインできます。透明ヘッダーのオプションとカスタマイズも利用でき、視聴者のエクスペリエンスを向上させることができます。 Astra テーマの多くのヘッダー カスタマイズの選択肢により、素晴らしいヘッダーを作成できます。