その バナー Pixpaのバナーセクションを使えば、SEO効果を高めながら、視覚的に魅力的なエリアをページに追加できます。ギャラリー、ページ、フォルダ、クライアントアルバム、ブログなど、どんなサイトでもバナーは雰囲気を盛り上げ、重要なコンテンツを際立たせるのに役立ちます。
ウェブサイトの上部にテキスト メッセージを表示するだけの場合は、 アナウンスバー. または、訪問者が Web サイトを表示したときに表示されるポップアップを作成する場合は、 マーケティングポップアップ.
この記事で
バナーとは
バナーは、コンテンツの上部/下部に全幅のバナー画像/画像スライドショー/ビデオを表示するために使用されます。
ページにバナーセクションを追加する
- ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
- あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。
- 今すぐ セクションカテゴリ 左側にあります。
- 選択する ヒーローセクション （1）カテゴリーをクリックし、 バナー タブ (2) から選択できます さまざまなレイアウト バナー (3) セクション。
- 任意のセクション レイアウトを選択し、クリックしてページに追加します。
バナーセクションを編集
セクションがすでにページに追加されている場合は、簡単に編集できます。
- セクションにカーソルを合わせてクリックします バナーを編集 （1）ボタン。
- サイドバーが開き、そこから 編集 （２）バナー部分
- 詳しくはこちら Save (3) 変更を加えたらボタンをクリックします。
バナーセクションのコンテンツ
その [コンテンツ]タブ [バナー編集] セクションでは、画像ベースまたはビデオベースのバナーのコンテンツを追加およびカスタマイズできます。
バナータイプ
バナーの種類を選択します。次のいずれかのオプションを選択できます。
- スライド – バナーに画像を表示する場合は、スライド オプションを選択します。 1 つのバナーの下に複数の画像スライドを追加できます。
- ビデオ – ビデオをバナースライドとして表示したい場合は、このオプションを選択します。各バナーの下に複数のビデオスライドを追加できます。
バナー セクション内に最大 25 枚のスライドを追加できます。
画像スライド
バナータイプでスライドを選択した場合は、複数の画像をバナースライドとしてアップロードしてスライドショーを作成できます。
- 複数のスライドを追加するには、 + スライドを追加
- 再注文 ドラッグハンドルを使用して移動します。
- 編集または削除 それぞれのアイコンを使用して個々のスライドを表示します。
画像/テキスト スライドの編集
- 画像
- 以下を行うには、 アップロード ボタンをクリックして、画像/スライドを変更します。 クリックしてください 削除 ボタンをクリックしてスライドを削除します。
- 画像の任意の場所をクリックするだけで、画像の焦点を変更できます。
- モバイル画像 – モバイルバナー画像をアップロードします。ここでは縦向きの画像を追加することをお勧めします。
- 代替テキストの指定 画像スライド用。 これは、SEO の目的に役立ちます。
- スライドのテキスト – スライドの上に表示されるスライド テキストを入力します。 テキストを太字にしたり、斜体にしたり、下線を引いたり、リンクしたり、その他多くのことができます。
参照： Pixpa テキストエディタ.
- スライドリンク
-
- 設定アイコンをクリックして、スライドのオーバーレイ リンクを入力します。
- Web サイト内外の任意のページ、メールアドレス、または連絡先番号を指定できます。
また確認してください： リンクテキスト/ボタン
- ボタン & リンク
-
- スライド コンテンツに最大 10 個のボタン/リンクを追加します。
- 通常のボタン、テキスト リンクを追加するか、画像/アイコンをボタンとして使用できます。
チェック： ボタンとリンク
- ヒット Save ボタンをクリックして変更を保存します。
完全なスライドは、次の場合にのみリンクに変換されます。 バナーのテキストとボタン オプションが次のように選択されます スライドごとに異なる.
ビデオスライド
時 ビデオスライド オプションを選択すると、YouTubeまたはVimeoの動画をバナーに埋め込むことができます。以下の設定オプションが利用可能です。
1. YouTube/Vimeoリンク – 動画への直接リンクを入力してください。サポートされている形式は次のとおりです。
- ユーチューブ： https://www.youtube.com/watch?v=XXXXXXXXXXX
- Vimeo： https://vimeo.com/XXXXXXXXXXX
2. ビデオを表示 – サイト上でのビデオの表示方法を選択します。
- 自動再生： ビデオは直接埋め込まれ、すべてのデバイスで自動再生されます (デフォルトではミュートされています)。
- 自動再生 – デスクトップのみ: ビデオは直接埋め込まれ、デスクトップでのみ自動再生されます (デフォルトではミュートされています)。
- ライトボックスで開く: ビデオのプレビューをクリックするとポップアップで開きます。
3. モバイル画像 – 自動再生動画が機能しない、またはサポートされていないモバイルデバイスに表示されるフォールバック画像をアップロードしてください。これにより、あらゆる画面サイズでバナーの視覚的な魅力を維持できます。
4. Altタグを指定する（オプション） – SEOとアクセシビリティを向上させるために、altタグを追加します。これは、スクリーンリーダーや画像を表示できない場合に代替画像を表示するものです。
5. スライドテキスト – スライドの上に表示されるスライド テキストを入力します。 テキストを太字にしたり、斜体にしたり、下線を引いたり、リンクしたり、その他多くのことができます。
参照： Pixpa テキストエディタ
6. スライドリンク
- 設定アイコンをクリックして、スライドのオーバーレイ リンクを入力します。
- Web サイト内外の任意のページ、メールアドレス、または連絡先番号を指定できます。
チェック： リンクテキスト/ボタン
7.ボタン & リンク
- スライド コンテンツに最大 10 個のボタン/リンクを追加します。
- 通常のボタン、テキスト リンクを追加するか、画像/アイコンをボタンとして使用できます。
チェック： ボタンとリンク
8. 保存 – ヒット Save 変更を保存するボタン
バナーのテキストとボタン
- テキストとボタンをすべてのスライドで同じにするか、スライドごとに異なるかを指定します。 を選択すると、 すべてのスライドで同じ オプション、 バナーテキスト の三脚と ボタン 使用されます。
- を選択すると、 スライドごとに異なる オプションを指定すると、特定のスライドに指定されたテキストとボタンが使用されます。
バナーテキスト
- すべてのスライドに共通のバナー テキストを入力します。
参照： Pixpa テキストエディタ
ボタンとリンク
- これらのボタン/リンクは、バナー スライド上に表示されます (すべてのスライドに共通)。
チェック： ボタンとリンク - 変更を加えたら、 Save 右上のボタンをクリックしてバナーに適用します。
バナー設定
バナー設定タブでは、次のオプションが表示されます。
バナー表示モード
-
- スケールとフィット – 画像はバナーの幅と高さに収まります。
- 幅に合わせる (デスクトップのみ) – 画像はバナーの幅に合わせて拡大縮小されます。 バナーの高さは画像の高さを継承します。
- バナー デスクトップの高さ – デスクトップ バナーの高さを選択した場合は、その高さを指定します。 フルブリード or スケールとフィット 表示モードフィールドのオプション。
- バナー モバイルの高さ – モバイル バナーの高さを指定します。
スライド表示コントロール
これらの設定により、バナー セクション内でのスライドの表示方法と遷移をカスタマイズできます。
-
スライドトランジションスタイル – スライドをどのように変更するかを選択します。以下のオプションを選択できます。 フェード、 水平スライドまたは垂直スライド スライド間のスムーズな移行を実現します。
-
1行あたりのスライド数 – 一度に表示されるスライドの行数を指定します。
- 列あたりのスライド数 – 表示するスライドの列数を定義します。これにより、各行に何枚のスライドが並んで表示されるかを制御します。
- スライド間のスペース – この設定を使用して、各スライド間の間隔を調整します。ピクセル単位で間隔を広げることで、スライド間の視覚的な間隔を調整できます。
- コンテンツの位置 – バナー内のコンテンツの位置を指定します。
- コンテンツの幅 – バナー コンテンツの幅を指定します。
バナーのスタイル
- 背景色 – バナーの背景色を設定します。
- オーバーレイの色 – バナーのオーバーレイ カラーを設定します。
- ナビゲーションスタイル – バナーのナビゲーション スタイルを指定します。山形、長い矢印、短い矢印から選択できます。ナビゲーション コントロールを無効にする場合は、[なし] を選択します。
- ナビゲーションの色 – バナー上のナビゲーション コントロールの色を指定します。
- 下スクロール矢印を有効にする – バナーの上にスクロールダウン矢印を表示するには、このオプションを選択します。
- コーナー半径 – バナースライドの角の丸みをカスタマイズします。すべての角に同じ半径を適用するか、角ごとに異なる値を指定できます。
回転木馬
これらの設定は、バナーまたはカルーセル セクション内でスライドが自動的に移動して動作する方法を定義します。
- スムーズスクロールを有効にする – これをオンにすると、スライドの遷移がスムーズになり、シームレスなスクロール効果が得られます。
- スライドの自動再生を有効にする – 有効にすると、ユーザーの操作なしでスライドが自動的に切り替わります。
- 自動再生の進行状況を表示 – 次のスライドの切り替え前のタイミングを示す視覚的なインジケーターを表示します。
- 自動再生遅延 – 自動スライド切り替え間の時間間隔を設定します (例: 4 秒ごと)。
- カルーセルループ – これを有効にすると、最後のスライドの後にスライドが最初のスライドに連続して戻るようになります。
ボタン
これらのオプションを使用すると、バナー内に表示されるボタンをカスタマイズできます。
- ボタンのサイズ - 小、中、大などの利用可能なオプションからボタンのサイズを選択します。
- アライメント – セクション内のボタンの配置 (左、中央、右) を設定します。
- ボタン間のスペース – 複数のボタン間の水平間隔を調整して、バランスの取れたレイアウトを実現します。
- ボタンの上のスペース – テキストとボタン間の垂直スペースを定義します (ピクセル単位で測定)。
- テキストリンクのサイズ – テキストベースのボタンまたはリンクのフォント サイズを設定します。
- 画像ボタンのサイズ – アイコンや画像を含むボタンのサイズを調整します。
- ボタンの幅 – デフォルト、大きい、特大、全幅などのオプションを使用して、ボタンの表示幅を選択します。
社会のアイコン
これらの設定により、バナー セクション内に表示されるソーシャル メディア アイコンの外観とスタイルをカスタマイズできます。
- アイコンサイズ – バナーの全体的なデザインに合わせて、ソーシャル メディア アイコンのサイズ (ピクセル単位) を調整します。
- アイコンの種類 – バナーのテーマに合わせてアイコン スタイル (クラシック、アウトライン、ソリッドなど) を選択します。
- アイコンの色 – アイコンの色の定義方法を選択します。以下のオプションがあります。
- リンクテキスト – セクションのリンク テキストと同じ色を使用します。
- カスタム - カスタムカラーを手動で選択できます。
- ブランドカラー – 各プラットフォームの公式ブランドカラーを適用します (たとえば、Facebook の場合は青)。
- 色を選択 – 「カスタム」を選択すると、このオプションを使用してアイコンの特定の色を選択できます。
バナーレイアウト
バナーのレイアウトを簡単に変更できます。 もっと知る バナーのレイアウトについて。
