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

画像をイメージギャラリーモジュールに追加する

更新日時 2019年 1月 28日

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

イメージギャラリーモジュールを使用して、サイトで画像を表示します。イメージスライダーモジュールにスライドを追加して、スタイル設定をカスタマイズする方法を説明します。

  • HubSpot アカウントで、ブログ、ランディングページ、またはウェブサイトページに移動します
  • イメージスライダーモジュールを使用して更新するページまたは投稿の上にカーソルを置き、[編集]をクリックします。
  • コンテンツエディターのイメージスライダーモジュールを直接クリックするか、左側のサイドバーのモジュールアイコンをクリックしてモジュールリストからイメージギャラリーモジュールを選択します。 
  • [+ 画像を追加] をクリックして、イメージギャラリーに新しいスライドを挿入します。
  • スライドの上にカーソルを置き、鉛筆アイコン編集をクリックしてスライド画像を追加し、そのキャプションと URL を編集します。
    • [画像を選択] をクリックして、コンピューターまたはファイルマネージャーから画像を選択します。
    • 含める alt テキストを入力します。 
    • この画像の下にキャプションを表示する場合は、[キャプションを表示]オンに切り替えます。次に、リッチテキストエディターを使用してキャプションを入力します。
    • この画像をウェブページにリンクするには、リンク URL を追加します。
    • 選択が完了したら、[イメージギャラリーに戻る] をクリックします。

edit-slide

  • イメージギャラリーモジュールからスライドを削除するには、既存のスライドの上にカーソルを置き、ごみ箱アイコン削除をクリックします。
  • イメージギャラリーモジュールでスライドを並べ替えるには、スライドをクリックしてドラッグ & ドロップして配置します。

reorder%20slides

イメージギャラリー用の画像を追加したら、左側のサイドバーエディターでモジュールオプションをカスタマイズできます。
  1. 表示モード: ページに表示するスライダーのタイプを選択します。標準のスライダー (訪問者が移動するためのサムネイル画像があるスライダー)、または Lightbox ギャラリー (ユーザーがサムネイルをクリックして Lightbox を開き、スライドのフルサイズバージョンとの間で切り替えられる) を選択できます。 
  2. ループスライド: スライドを自動的に繰り返すには、このスイッチをオンに切り替えます。
  3. 自動表示: スライドをページで自動的にスクロールさせる場合は、このスイッチをオンに切り替えます。
  4. 自動スクロール間の秒数: 矢印キーを使用して、スライド間の秒数を指定します。
  5. ナビゲーションボタンを表示: スライダーの一番下にインジケーターを追加して、訪問者に何枚のスライドがあり、どのスライドを現在表示しているかを示すには、このスイッチをオンに切り替えます。 
  6. 高さを変更可能: ドロップダウンメニューを使用して、スライダーを一番高いスライドの高さに保つか、各画像で自動的にサイズ変更するかを選択します。
  7. スライドのトランジション: スライド間のトランジション時に表示する視覚効果 ([スライド] または [フェード]) を選択します。
  8. キャプション位置: スライドでキャプションを表示する場合は、画像の一番上にキャプションを重ね合わせるか、画像の下に表示するかを選択します。 

image-gallery

  • モジュールエディターの一番上にある [スタイル] タブをクリックして、イメージギャラリーモジュールの設定にアクセスします。
    • イメージギャラリーのキャプションの [フォントファミリー][フォントサイズ][テキストの色][テキストのアラインメント(位置合わせ)][行の高さ][スタイル] をカスタマイズします。
    • イメージギャラリーの画像およびサムネイルの周囲のパディングとマージンを設定します。各画像の周囲のスペースを同じに設定するには、[均等] チェックボックスをクリックします。
    • イメージギャラリーモジュール自体の背景色とスタイルを指定します。[適用] をクリックして、エディターのモジュールに変更内容が反映されるのを確認します。

image-gallery-styles

  • 画像とスタイル設定を追加したら、[保存してモジュールリストに移動] をクリックします。 
  • [公開] または [更新] をクリックして、変更内容を公開します。