目次
ヘッダーなしでは Web サイトが完成しないということに同意していただけます。 WordPress でヘッダーを作成するには 2 つの異なるオプションがあることをご存知ですか?このチュートリアルでは個人差について説明します。
純正ヘッダー画像
ご存知のとおり、クラシックな WordPress ヘッダーはすべての異なるページで使用されます。通常、横に広い長方形の箱です。中にはロゴやウェブサイトの名前、キャッチフレーズ、メニュー項目が入っています。ヘッダー画像と呼ばれる背景画像を挿入することもできます。ヘッダー画像は、訪問者の注意を引き、Web サイト全体の外観と雰囲気を作成するのに最適です。控えめなヘッダー画像を使用するか、訪問者の注意を Web サイトのナビゲーションに集中させる主要な画像を使用するかは、あなた次第です。
WordPressカスタマイザーでヘッダーを編集する方法
デフォルトでは、ヘッダー画像はWordPressカスタマイザーを介して変更できます。 WordPress 管理者と Web サイトの両方からアクセスできます。
- WP 管理者から直接、次の場所に移動するだけです。 外観 –> カスタマイズ
- フロントエンドでログインしている場合は、上部バーの「カスタマイズ」をクリックします
カスタマイザーには、現在アクティブなテーマの基本的な外観設定がすべて含まれています。したがって、ヘッダー画像設定をどこで見つけるかは、アクティブなテーマによって異なります。 Citadela テーマでは、ヘッダー画像を追加および編集できます。 カスタマイズ中 –> 外観 –> ヘッダーの背景.
ヘッダー画像の設定
どのヘッダー画像を選択しても、ニーズに合わせて構成できます。 「ヘッダー画像リピート」を利用すると面白い効果が得られます。次のオプションを構成できます。
- タイル
- 水平方向に並べて表示
- 垂直方向に並べて表示
- 繰り返しなし (画像を繰り返したくない場合)
WordPress のその他の設定 - ヘッダー画像のサイズ
ヘッダーを編集して画像を調整するもう 1 つのオプションは、適切なサイズを設定することです。ヘッダー画像のサイズには次の 3 つのオプションがあります。
- オリジナル – 元の画像サイズを維持します
- カバー – アップロードされた画像は左右に合わせてサイズ変更され、画像を合わせてカットすることもできます
- 含む – ヘッダー画像のサイズは、画像全体が表示されるように調整されます
ヘッダー内の画像の位置を設定したり、背景の固定を設定したりすることもできます。
ヘッダーとして機能するカバーブロック
この記事の冒頭ですでに述べたように、WordPress エディターでヘッダーを編集する方法はいくつかあります。カスタマイザーの使用に加えて、Cover ブロックと呼ばれるコア WordPress ブロックの 1 つを使用することもできます。それで、違いは何ですか？
カスタマイザーで作成されたクラシック ヘッダーは Web サイト全体に関連しますが、カバー ブロックを使用すると、基本的にヘッダー画像として機能するカバー画像を任意のページまたは投稿に追加できます。 1 ページ内で複数回使用したり、異なる設定で投稿したりすることもできます。
カバーブロックの使用場所
カバー ブロックは、従来の Web サイト ヘッダーと比較して、Web サイト全体でより幅広い用途に使用できます。カバー ブロックは、ワイドな全幅のタイトル画像をコンテンツに追加します。これを使用して、ブログ投稿内のコンテンツを視覚的に分離できます。各投稿セクションには、次のコンテンツに接続できる独自のヘッダー画像が取得されます。優れた機能は、Cover ブロック内にテキストを直接書き込むことができることです。このテキストは画像の上に表示されます。
ホームページのヘッダー
オリジナルの外観を実現したい場合は、Web サイトのヘッダーの代わりにカバー ブロックを使用することもできます。 Cover ブロックにはさまざまな配置オプションが用意されているため、コンテンツの幅に設定したり、全幅にしたりすることができます。全幅ヘッダーは大きな背景画像としても使用できます。ただし、Citadela テーマのページ タイトルをオフにすることを忘れないでください。この手順は、Cover ブロックを Web サイトのヘッダーとして使用する場合に必要です。
Coverブロックを使ったヘッダーの作成方法
まず最初に、Cover ブロックを追加する必要があります。任意のページに追加することも、次の方法で投稿することもできます。
上部バーの「+」記号をクリックするか、コンテンツ内の任意の場所で「+」記号をクリックします。その後は、Cover ブロックを検索するだけです。
もう 1 つの簡単な方法は、ブロック名の後に「/」を使用してブロックを追加することです。
Cover ブロックを追加すると、画像またはビデオをアップロードするスペースが表示されます。メディアライブラリから画像を選択することもできます。選択した画像またはビデオがヘッダーとして使用されます。
ヘッダーのタイトル
Cover ブロックを使用して追加されたヘッダーの興味深い点は、画像の上にテキスト タイトルを書き込むことができることです。このタイトルは、ブログ投稿などのセクションのヘッダーとしても使用できます。任意の URL を追加することもできます。
カバーブロックの位置合わせ
カバーブロックはブロックツールバーを使用して位置合わせできます。コンテンツ領域内で左、右、または中央に配置できます。ワイドまたは全幅に設定することもできます。これらのオプションは、Web サイトの構築に使用するアクティブなテーマでサポートされている必要があります。
表紙画像の設定
カバー画像の外観はインスペクターで変更できます。固定背景として設定すると、画像はページ上の残りのコンテンツと一緒にスクロールしませんが、常にその場所に留まります。
フォーカル ポイント ピッカーを使用すると、画像のどの部分をヘッダーに表示するかを選択できます。画像をさらに詳しく操作することができます。たとえば、オーバーレイの色と背景の不透明度を設定できます。どちらの設定も、ヘッダーの最後の仕上げに役立ちます。ブログ投稿内でカバー ブロックを使用する場合は、正しい配色と透明度を使用して、投稿に希望の雰囲気を加えることができます。タイトル テキストがはっきりと見えるようにする必要があるため、これらの設定には注意してください。
動画ヘッダーの作成
カバー ブロックは、Web サイトのヘッダー内でビデオを再生するために使用することもできます。訪問者の注意を引いたり、製品やサービスを宣伝したりできます。がある サポートされているいくつかのビデオ形式、使用できる最も一般的なのは .mp4 です。
素晴らしいのは、ビデオの上にタイトルを書き込んだり、位置を揃えたり、全幅にしたり、カラーオーバーレイを設定したりできることです。カバーブロックの設定は、すべてのメディアタイプで同じです。
ヘッダーに関してはどのような経験がありますか?カバーブロックでヘッダーを作成したことはもう試しましたか? WordPress カスタマイザーを使用したクラシックな Web サイトヘッダーを好みますか?以下のコメント欄でお知らせください。