任意のページのヘッダーのスタイル設定

各ページのヘッダーの位置、スタイル、色の設定を調整することで、ヘッダーの表示方法をカスタマイズできます。ページコンテンツをヘッダーの下から開始するか、後ろから開始するかを選択したり、ヘッダースタイルを「標準」、「透明」、「カスタムカラー」のいずれかに設定したり、タイトル、メニュー、アイコンなどのヘッダー要素の色を変更したりできます。これらのオプションにより、ユニークで視覚的に魅力的なページレイアウトをより柔軟に設計できます。

ヘッダーを透明に設定する前に、ページの最初のセクションにフルブリード画像またはバナーが含まれていて、すっきりとしたプロフェッショナルな外観が維持されていることを確認してください。

この記事で


Pixpa Studioでは、メニュー項目の種類や作業中のページに応じて、様々な場所でヘッダースタイルを設定できます。スタンドアロンページ、フォルダ、商品/ギャラリーセクションなど、ヘッダー設定の場所は様々で、サイトの外観をより柔軟にコントロールできます。


ページヘッダー

  • 編集したいページにカーソルを合わせます。 三つの点 (3)アイコン。
  • ドロップダウンからクリック コンテンツを編集する (4)オプション

  • ページエディタが開きます。 設定 (5)ボタン。
  • サイドバーから、 ヘッダ (6)オプション。
  • カスタマイズ後、 Save (7) 変更。

あるいは、スタジオ検索オプションを使用して、編集するページに移動することもできます。

  • 入力する ページタイトル (1) (編集したいもの) を検索バーに表示します。
  • ソフトウェアの制限をクリック ページ (2) 下 サイト メニュー項目。 


フォルダヘッダー

  • ウェブサイト (1)セクションで、フォルダの上にカーソルを置きます。 3つの縦アイコン (2)カーソルを合わせると表示されます。
  • メニューからをクリックします 設定 (3)オプション
  • カスタマイズのオプションが表示されます。 ヘッダ (4)フォルダ設定ページの下にあります。
  • 変更を加えたら、をクリックします Save (5)ボタン。


いくつかのページでは 製品カテゴリー、 商品ページを編集するなど ヘッダースタイルのオプション 下で利用可能です バナー 設定パネル。

  • 以下を行うには、 バナー (1) タブ。
  • サイドバーから開く 設定 とします。

ここから、ヘッダー スタイル (標準、透明、カスタム) を構成したり、要素とヘッダーの色を調整したり、コンテンツの位置を設定したりできます。


ページコンテンツの位置

ページ コンテンツをヘッダーとどのように配置するかを選択できます。

  • ヘッダーの下: コンテンツはヘッダーの下から始まります。
  • ヘッダーの後ろ: コンテンツがヘッダーと重なり、通常は透明なヘッダーで使用されます。


ヘッダースタイル

このページでヘッダーをどのように表示するかを選択します。

1. ヘッダースタイル

  • ノーマル: デフォルトの背景は単色ヘッダーです。デザインセクションで設定できます。詳細はこちらをご覧ください。
  • トランスペアレント: ヘッダーの背景を透明にして、その背後にあるコンテンツが見えるようにします。
  • カスタム: ヘッダーとその要素のカスタム カラーを定義できます。

「透明」または「カスタム」を選択すると、要素の色をカスタマイズして視認性を高めることができます。

2. 要素の色(透明またはカスタムスタイルでのみ表示)

「透明」または「カスタム」を選択すると、「要素の色」オプションが表示されます。

  • 間の選択 デフォルトの色 or 色を指定.

これにより、サイトのタイトル、メニュー、アイコンなどのヘッダー要素の色を変更して、背景画像やビデオ上での視認性を最適化できます。

3. ヘッダーの色(カスタムスタイルでのみ表示)

カスタム ヘッダー スタイルを選択すると、追加のオプションが表示されます。

  • ヘッダーの色: ヘッダー自体のカスタム背景色を選択します。

これにより、ヘッダーの外観と要素の両方を完全に制御し、各ページの視覚的なトーンと一致させることができます。

プロからのヒント

ヘッダーの色は、ページごとに個別にカスタマイズできます。 カスタム額装 下のオプション ヘッダースタイルこれにより、各ページのデザインに合った独自のヘッダー色を設定できます。


ヘッダーの例

  • 以下は、 通常のヘッダー

  • これは、 透明なヘッダー。

ヘッダーが透明に設定されたライブ ページを表示します。


お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。