更新日時 2020年 10月 19日
イメージギャラリーモジュールを使用して、サイトで画像を表示します。イメージスライダーモジュールにスライドを追加して、スタイル設定をカスタマイズする方法を説明します。
- HubSpot アカウントで、ブログ、ランディングページ、またはウェブサイトページに移動します。
- イメージスライダーモジュールを使用して更新するページまたは投稿の上にカーソルを置き、[編集]をクリックします。
- コンテンツエディターのイメージスライダーモジュールを直接クリックするか、左側のサイドバーのモジュールアイコンをクリックしてモジュールリストからイメージギャラリーモジュールを選択します。
- [+ 画像を追加] をクリックして、イメージギャラリーに新しいスライドを挿入します。
- スライドの上にカーソルを置き、鉛筆アイコンをクリックしてスライド画像を追加し、そのキャプションと URL を編集します。
- [画像を選択] をクリックして、コンピューターまたはファイルマネージャーから画像を選択します。
- 含める alt テキストを入力します。
- この画像の下にキャプションを表示する場合は、[キャプションを表示] をオンに切り替えます。次に、リッチテキストエディターを使用してキャプションを入力します。
- この画像をウェブページにリンクするには、リンク URL を追加します。
- 選択が完了したら、[イメージギャラリーに戻る] をクリックします。
- イメージギャラリーモジュールからスライドを削除するには、既存のスライドの上にカーソルを置き、ごみ箱アイコンをクリックします。
- イメージギャラリーモジュールでスライドを並べ替えるには、スライドをクリックしてドラッグ & ドロップして配置します。
- 表示モード: ページに表示するスライダーのタイプを選択します。標準のスライダー (訪問者が移動するためのサムネイル画像があるスライダー)、または Lightbox ギャラリー (ユーザーがサムネイルをクリックして Lightbox を開き、スライドのフルサイズバージョンとの間で切り替えられる) を選択できます。
- ループスライド: スライドを自動的に繰り返すには、このスイッチをオンに切り替えます。
- 自動表示: スライドをページで自動的にスクロールさせる場合は、このスイッチをオンに切り替えます。
- 自動スクロール間の秒数: 矢印キーを使用して、スライド間の秒数を指定します。
- ナビゲーションボタンを表示: スライダーの一番下にインジケーターを追加して、訪問者に何枚のスライドがあり、どのスライドを現在表示しているかを示すには、このスイッチをオンに切り替えます。
- 高さを変更可能: ドロップダウンメニューを使用して、スライダーを一番高いスライドの高さに保つか、各画像で自動的にサイズ変更するかを選択します。
- スライドのトランジション: スライド間のトランジション時に表示する視覚効果 ([スライド] または [フェード]) を選択します。
- キャプション位置: スライドでキャプションを表示する場合は、画像の一番上にキャプションを重ね合わせるか、画像の下に表示するかを選択します。
- モジュールエディターの一番上にある [スタイル] タブをクリックして、イメージギャラリーモジュールの設定にアクセスします。
- イメージギャラリーのキャプションの [フォントファミリー]、[フォントサイズ]、[テキストの色]、[テキストのアラインメント（位置合わせ）]、[行の高さ]、[スタイル] をカスタマイズします。
- イメージギャラリーの画像およびサムネイルの周囲のパディングとマージンを設定します。各画像の周囲のスペースを同じに設定するには、[均等] チェックボックスをクリックします。
- イメージギャラリーモジュール自体の背景色とスタイルを指定します。[適用] をクリックして、エディターのモジュールに変更内容が反映されるのを確認します。
- 画像とスタイル設定を追加したら、[保存してモジュールリストに移動] をクリックします。
- [公開] または [更新] をクリックして、変更内容を公開します。