メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

イメージ ギャラリー モジュールを編集する

更新日時 2021年 9月 16日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic(旧製品)

コンテンツにイメージ ギャラリー モジュールを追加すると、一連の画像を循環させて表示することができます。イメージギャラリー内の画像には、リンクとキャプションを追加できます。 

注:イメージ ギャラリー モジュールを単一のブログ投稿に追加することはできません。ブログ投稿テンプレートに追加されたイメージ ギャラリー モジュールは、すべてのブログ投稿に表示されます。 

イメージギャラリー内の画像を追加または編集する

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
    • ブログ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • コンテンツの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターで、イメージ ギャラリー モジュールをクリックします。
  • サイドバーエディターの[スライド]セクションで[+追加]をクリックし、新しいスライドをイメージギャラリーに追加します。
    • [画像]セクションで、[アップロード]をクリックしてコンピューターから画像を選択するか、[画像を参照]をクリックしてファイルツールから画像を選択します。 
    • 画像の下にキャプションを表示するには、[キャプションを表示]スイッチをクリックしてオンに切り替えます。リッチ テキスト エディターで、キャプションのテキストを入力します。 
    • 画像へのリンクを追加するには、[リンクURL]セクションでURLを入力します。 
    • さらに画像を追加するには、[イメージギャラリーに戻る]クリックします。イメージ ギャラリー モジュールの編集を終了するには、[変更を適用]をクリックします。 
add-image-to-image-gallery
  • 既存のスライドを編集するには、スライドの上にカーソルを重ねて鉛筆アイコンeditをクリックします。新しい画像を選択する場合は[置換]をクリックし、画像を削除する場合は[削除]をクリックします。
  • スライドを削除するには、既存のスライドの上にカーソルを重ねてゴミ箱アイコンdeleteをクリックします。
  • スライドを並べ替えるには、スライドをクリックして目的の位置にドラッグ&ドロップします。

reorder-image-gallery-slides

  • [変更を適用]をクリックし、コンテンツエディターで変更を確認します。 

イメージギャラリーの設定をカスタマイズする

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
    • ブログ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • コンテンツの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターで、イメージ ギャラリー モジュールをクリックします。
  • 訪問者がスライド間を移動する方法を変更するには、[表示モード]ドロップダウンメニューをクリックし、次のいずれかのモードを選択します。
    • 標準スライダー:訪問者には一度に1つのスライドが表示されます。訪問者は左右の矢印をクリックすることで、スライド間を移動できます。 
    • サムネイルナビゲーション:訪問者がイメージギャラリーの下にあるサムネイルをクリックすることで、そのギャラリー内のスライドを表示できます。 
    • Lightboxギャラリー:訪問者がスライドのサムネイルバージョンをクリックすると、Lightboxが開きます。このLightboxで、すべてのスライドからなる完全バージョン間を移動できます。 
  • すべてのスライドが表示された後に自動的に表示を繰り返すには、[ループスライド]チェックボックスをオンにします。 
  • スライドを自動的に進めるには、[自動先送り]チェックボックスをオンにします。 
  • [自動スクロール間の秒数]フィールドに、各スライドを表示する秒数を入力します。

image-gallery-settings-loop-slides

  • スライドの合計数と現在のスライドの番号を表示するには、[ナビゲーションボタンを表示]チェックボックスをオンにします。 
  • イメージギャラリーの高さを設定するには、[高さを変更可能]ドロップダウンメニューをクリックし、次のいずれかの設定を選択します。
    • 高さを変更可能:表示されるスライドの高さに応じて、イメージギャラリーの高さが変わります。
    • 高さ固定:イメージギャラリーの高さは、常に最も高いスライドの高さに維持されます。
  • スライドのトランジションの視覚効果を設定するには、[スライドのトランジション]ドロップダウンメニューをクリックし、[スライド]または[フェード]を選択します。 
  • スライドに対するキャプションの相対位置を設定するには、[キャプション位置]ドロップダウンメニューをクリックし、オプションを選択します。 

image-gallery-navigation-buttons