バナー

使い方 バナー ウェブサイトに視覚的なセンスを加え、コンテンツに個性を加えます。 gallery, ページ, フォルダ, クライアントアルバムまたは ブログ。 あなたは追加することができます バナー画像の画像代替テキスト、これは SEO に役立ちます。

バナー コンテンツの上部または下部 (Web サイトのヘッダーの下) に配置でき、通常、全幅のバナー画像/画像スライドショー/ビデオを表示するために使用されます。

先端

ウェブサイトの上部にテキスト メッセージを表示するだけの場合は、 アナウンスバー. または、訪問者が Web サイトを表示したときに表示されるポップアップを作成する場合は、 マーケティングポップアップ.

バナーは次のようになります。 

ライブデモサイトをチェックしてください。


バナー設定は次のように分類されます。 

  1. スライド
  2. 設定
  3. レイアウト


1.スライド

スライド カテゴリのオプションは次のとおりです。 

バナーの種類をお選びください。 カスタム バナー、自動バナー、非アクティブから選択できます。

  • カスタムバナー – バナーにはカスタム スライドが使用されます。
  • 自動バナー – ギャラリーのアイキャッチ画像、見出し、および説明がバナーに使用されます。
  • 非アクティブ – バナーは Web サイトに表示されません。


スライド
  • セットアップボタンをクリックすると、セットアップが開始されます +スライドを追加 (1) カスタム スライドをバナーに追加するためのボタン。
  • スライドをアップロードしたら、次のことができます。 edit (2)または 削除 (3) スライド。

覚えておくべきポイント: 

  • バナー画像の理想的なサイズは 2000ピクセルX 2000ピクセル。 
  • バナーでサポートされている画像ファイル形式は次のとおりです。 JPG、JPEG、PNG、GIF。 
  • 縦向きの画像ではなく、横向きの画像をアップロードすることをお勧めします。
  • からの画像の上にテキストを追加します。 マスター/スライドテキスト 分野。 テキストを含む画像をアップロードしないでください。


画像/テキスト スライドの編集 

  • クリックしたら edit アイコンをクリックすると、画像/テキスト スライド ドロワーが表示されます。


ここで使用できるオプションは次のとおりです。 

  1. 画像 
    • セットアップボタンをクリックすると、セットアップが開始されます アップロード ボタンをクリックして、画像/スライドを変更します。 クリックしてください 削除 ボタンをクリックしてスライドを削除します。
    • 画像の任意の場所をクリックするだけで、画像の焦点を変更できます。
  2. モバイル画像 – Uモバイル バナー画像をアップロードします。 ここにポートレート画像を追加することをお勧めします。
  3. 代替テキストの指定 画像スライド用。 これは、SEO の目的に役立ちます。

  1. スライドのテキスト – スライドの上に表示されるスライド テキストを入力します。 テキストを太字にしたり、斜体にしたり、下線を引いたり、リンクしたり、その他多くのことができます。
    参照: Pixpa テキストエディタ.

  1. スライドリンク
    • 設定アイコンをクリックして、スライドのオーバーレイ リンクを入力します。
    • Web サイト内外の任意のページ、メールアドレス、または連絡先番号を指定できます。

チェック: リンクテキスト/ボタン.

Note

完全なスライドは、次の場合にのみリンクに変換されます。 バナーのテキストとボタン オプションが次のように選択されます スライドごとに異なる.

  1. ボタン & リンク
    • スライド コンテンツに最大 10 個のボタン/リンクを追加します。
    • 通常のボタン、テキスト リンクを追加するか、画像/アイコンをボタンとして使用できます。
      チェック: ボタンとリンク.
  1. ヒット Save ボタンをクリックして変更を保存します。


  • テキストとボタンをすべてのスライドで同じにするか、スライドごとに異なるかを指定します。 を選択すると、 すべてのスライドで同じ オプションを選択すると、バナー テキストとボタン 1 および 2 が使用されます。
  • を選択すると、 スライドごとに異なる オプションを指定すると、特定のスライドに指定されたテキストとボタンが使用されます。


  • これらのボタン/リンクは、バナー スライド上に表示されます (すべてのスライドに共通)。
    チェック: ボタンとリンク.


2。 設定

[バナー設定] タブには、次のオプションがあります。


  1. バナー幅 – バナーの幅を指定します。
    • '全幅' は余白を残さず幅全体をカバーしながらバナーを表示します。
    • '箱入りの' 画面の左右にある程度のパディングを残してバナーを表示します。
    • 'サイト幅' で指定できます 設計 セクション。 そこで固定幅を指定できます。
      指定された固定幅を守ってバナーを表示します。
    • スケールとフィット – 画像はバナーの幅と高さに収まります。
    • 幅に合わせる (デスクトップのみ) – 画像はバナーの幅に合わせて拡大縮小されます。 バナーの高さは画像の高さを継承します。
  1. バナー デスクトップの高さ – デスクトップ バナーの高さを選択した場合は、その高さを指定します。 フルブリード or スケールとフィット 表示モードフィールドのオプション。
  2. バナー モバイルの高さ – モバイル バナーの高さを指定します。
注:

バナー セクションがページに追加された場合、バナーの高さは セクションの高さ.


  1. ページヘッダー – バナーに適用されるヘッダー スタイルを選択します。
    • 選択した場合 デフォルトの場合、ヘッダーはデフォルトの Web サイト ヘッダー スタイルを使用し、バナーはヘッダーの後に配置されます。 チェックアウト 実例.
    • 選択した場合 トランスペアレント、ヘッダーの背景は透明に設定され、ヘッダー要素は白になります。 バナーはヘッダーの下に配置されます。 チェックアウト 実例
  2. ヘッダーアイテム - あなたが持っている場合 ヘッダーを透明に設定する、あなたが選ぶことができます ヘッダー項目/メニュー項目の色:
    • 万一に備えて デフォルトの色 が選択されている場合、ヘッダー項目の色は 設計 のセクションから無料でダウンロードできます。
    • 万一に備えて 色を指定 が選択されている場合は、クリックしてヘッダー項目の色を選択できます。

チェック: 任意のページのヘッダー項目のスタイリング.


  1. 透明性 – バナーの可視性を設定します。
  2. 役職 – バナーの位置を指定します。


  1. コンテンツの位置 – バナー上のコンテンツの位置を指定します。
  2. コンテンツの幅 – バナー コンテンツの幅を指定します。
  3. 背景色 – バナーの背景色を設定します。
  4. オーバーレイの色 – バナーのオーバーレイ カラーを設定します。
  5. ナビゲーションスタイル – バナーのナビゲーション スタイルを指定します。山形、長い矢印、短い矢印から選択できます。ナビゲーション コントロールを無効にする場合は、[なし] を選択します。
  6. ナビゲーションの色 – バナー上のナビゲーション コントロールの色を指定します。
  7. アウターマージン – バナーの外側の余白を適用します。 外側の余白を適用すると、バナーの下部に空きスペースが発生します。
  8. スクロールダウン矢印 – バナーの上にスクロールダウン矢印を表示するには、このオプションを選択します。


  1. スライドショー – を選択します 自動再生 バナーのスライドショーを有効にするオプション。
  2. スライドショーの速度 – スライドショーの速度を指定します (秒単位)。
  3. スライドショーのトランジション – バナーの画像遷移スタイルを指定します。
  4. 最後に、 Save


  1. 整列 ボタン/リンク 左揃え、右揃え、または中央揃えにします。
  2. 特定します 間のスペース ボタン/リンク 追加されました。
  3. 特定します 上のスペース ボタン/リンク.
  4. 選択する ホバー効果 ボタン/リンク用。

  1. 選択する 通常ボタンのサイズ に追加した ボタン/リンク
  2. 特定します 画像ボタンの高さ に画像リンクを追加した場合 ボタン/リンク
  3. 特定します アイコンボタンのサイズ にソーシャルアイコンを追加した場合 ボタン/リンク.  

ソーシャルアイコンを追加した場合 ボタン/リンク、その後:

  1. 選択する ソーシャルアイコンの種類/形。
  2. 選択する ソーシャル アイコンの色スタイル。
    を選択した場合 選択した色 上記のオプション:

    1. 特定します ソーシャル アイコンの色.
    2. 特定します ソーシャル アイコンの背景色.


3.レイアウト

バナーのレイアウトを簡単に変更できます。 もっと知る バナーのレイアウトについて。


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

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