画像スライダーモジュールを使用する

画像スライダーモジュールを使って、同じモジュールに複数の画像を表示することができます。画像が自動的に循環するように設定することも、訪問者が手動で画像を切り替えるようにサポートすることもできます。 

画像スライダーモジュールのスライドの追加と編集

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで、左のサイドバーにあるadd追加アイコンをクリックします。 
4. Mediaカテゴリーをクリックして展開し、「画像スライダー」モジュールをクリックし、所定の位置にドラッグします。 
5. 左のサイドバーで、 スライド の上にマウスポインターを置き edit 編集アイコンをクリックして、そのスライドに画像を追加します。
   
   • [画像]セクションで、[アップロード]をクリックしてご使用のコンピューターから画像を選択するか、[画像を参照]をクリックして ファイルツールから画像を選択します。画像を生成するには、[ AIを利用して生成]をクリックします。
   • [キャプション]フィールドに、画像の下に表示されるキャプションを入力します。キャプションなしで画像を表示するには、デフォルトのテキストを削除します。 
   
   • スライドにリンクを追加するには
     • 「リンク先」ドロップダウンメニューをクリックし、リンクタイプを選択します。
     • 表示されるフィールドでリンク先を指定する。HubSpotでのリンクの操作について詳細をご確認ください。 
     • コンテンツを開いたままにして、リンクを新しいウィンドウで開くには、[ リンクを新しいウィンドウで開く]スイッチをオンに切り替えます。 
     • 検索エンジンにリンク先がウェブサイトの一部でないことを示すには、「フォローしない（「フォローしない（「フォローしない（「フォローしない（No follow）」）」）」）」チェックボックスを選択します。 
   • 変更の適用をクリックして、このスライドに変更を保存します。 
6. サイドバーエディターの上部で、画像スライダーをクリックして、モジュールの概要に戻ります。 

7. さらにスライドを追加するには、別のスライドにマウスポインターを合わせ、edit 「編集」アイコンをクリックします。
8. 変更を確定するには、変更の適用をクリックします。 

画像スライダーモジュールの設定を編集する

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで、画像スライダーモジュールをクリックします。 
4. サイドバーエディターで、「設定」をクリックして、モジュールの設定を編集します。 
5. スライドオプションを編集するには、スライドセクションをクリックして展開します： 
   • [ページあたりのスライド数]フィールドに、イメージスライダーに一度に表示するスライド の数を入力します。一度に最大5枚のスライドを表示できます。一度に複数のスライドを選択すると、キャプションとサムネイルは表示されません。 
   • [画像サイズ]フィールドで、 縦横比のオプションを選択します。デフォルトでは、画像はアップロードされたアスペクト比を使用して表示されます。画像全体の縦横比を統一するには、「縦横比を強制」を選択します。そのため、画像が歪んで見えることがあります。 
   • スライドにキャプションを追加または削除するには、[ キャプションを表示 ]チェックボックスをオンにします。デフォルトでは、[ キャプションを表示 ]チェックボックスはオンになっています。
   • [キャプションの位置 ]ドロップダウンメニューから、キャプション の位置 を選択します。 

6. Movementセクションをクリックして展開し、スライド遷移オプションを編集します： 
   • スライドのトランジション方法を設定するには、トランジション オプション ([フェード]など)を選択します。
   • 最後のスライドに達したときにスライドを繰り返すには、「スライドのループ」チェックボックスを選択します。 
   • スライドを自動的に循環させるには、自動再生チェックボックスを選択します。「ページあたりのスライド数」設定よりスライド枚数が少ない場合、サイクリングは発生しません。 
7. ナビゲーションオプションを編集するには、[ナビゲーション]セクションをクリックして展開します。 
   • 訪問者が手動でスライドを切り替えられるように矢印を表示するには、ナビゲーション矢印を表示するチェックボックスを選択します。 
   • ナビゲーションの下に画像のサムネイルを表示するには、「サムネイルを表示」チェックボックスを選択します。 
   • スライドの合計数を表示するドットを画像の下に表示して訪問者が特定の画像を選択できるようにするには、[ ドットナビゲーションを表示]を選択します。 
8. 完了したら、[ 変更を適用]をクリックします。 

イメージスライダーモジュールのスタイルを編集

スライド、 ナビゲーション、 スライダーのスタイルなど、イメージ スライダー モジュールのスタイルを編集できます。

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで、画像スライダーモジュールをクリックします。 
4. サイドバーエディターで、スタイルタブをクリックします。 
5. イメージ スライダー モジュールのスタイル編集を続けるには、[ スライド]、[ ナビゲーション ]、または [スライダー]をクリックします。 

スライドのスタイルを編集

スライドでの画像の表示スタイルを編集するには、次の手順に従います。

1. [スライド]をクリックします。
2. [画像]セクションをクリックして展開します。
3. コーナー半径フィールドにピクセル値を入力する。値が大きいほど、角が丸く見える。 
4. 完了したら、[ 変更を適用]をクリックします。

スライドのキャプションの表示スタイルを編集するには、次の手順に従います。

1. [キャプション]をクリックします。
2. [ 背景] セクションをクリックして展開します。 
   • キャプションの上または下に余白を追加するには、[上の余白]と[下の余白]フィールドに ピクセル値 を入力します。
   • キャプションにパディングを追加するには、Paddingフィールドにピクセル値を入力します。各面に別々の値を追加するには、「個別に編集」をクリックし、ピクセル値をフィールドに入力する。
   • キャプションに背景色を追加するには、カラーセクションの最初のフィールドに16 進値を入力するか、カラーパレットをクリックしてカラーを選択します。カスタムカラーは、Advancedタブから追加できます。
   • 背景色の透明度を設定するには、カラーセクションの2番目のフィールドに、パーセント値を入力します。透明度を100％にすると不透明になり、0％にすると見えなくなる。 
3. [テキスト ]セクションをクリックして展開します。 
   • フォントタイプを変更するには、[ フォントを選択 ]ドロップダウンメニューをクリックし、フォントを選択します。 
   • フォントサイズを変更するには、Sizeドロップダウンメニューをクリックし、フォントサイズを選択します。 
   • フォントカラーを変更するには、カラーパレットをクリックし、カラーを選択します。カスタムカラーは、Advancedタブから追加できます。
   • フォントの太さを変更するには、太字、 italicIcon イタリック、または underlineIcon 下線付きのテキストの 太さ bold アイコンをクリックします。
4. 完了したら、[ 変更を適用]をクリックします。

ナビゲーションのスタイルを編集

スライダーの矢印、 ドット、自動再生ボタン、 サムネイルナビゲーションなど、ナビゲーションのスタイルを編集できます。利用可能なスタイル設定オプションは、イメージ スライダー モジュールの ナビゲーション設定によって異なります。

スライダー矢印

1. ナビゲーションをクリックする。
2. [スライダー矢印]セクションをクリックして展開します。
3. [ 背景色 ]セクションに 16進値 を入力します。カラーパレット をクリックして 色を選択することもできます。カスタムカラーは [詳細 ]タブから追加できます。
4. 背景色の透明度を設定するには、[ 背景色 ]セクションの2番目のフィールドに パーセンテージ値 を入力します。例えば、透明度が100%の場合、透明度が100%の場合、不透明になり、透明度が0%の場合は表示されません。
5. 左右の矢印に使用されるアイコンを置き換えるには、[ 左 アイコン]フィールドと [右アイコン ]フィールドの上にある [置換 ]をクリックします。右側のパネルで、アイコンを選択します。 
6. 左右のアイコンの色を設定するには、[ アイコンの色 ]セクションの最初のフィールドに 16進数の値 を入力します。カラーパレット をクリックして 色を選択することもできます。カスタムカラーは [詳細 ]タブから追加できます。
7. アイコンの背景色の透明度を設定するには、[ アイコンの色 ]セクションの2番目のフィールドに パーセンテージ値 を入力します。例えば、透明度が100%の場合、透明度が100%の場合、不透明になり、透明度が0%の場合は表示されません。 
8. 完了したら、[ 変更を適用]をクリックします。

ドットと自動再生ボタン

1. ドットと自動再生ボタンセクションを展開するにはクリックしてください。
2. [色 ]セクションの最初のフィールドに 16進値 を入力するか、 カラーパレット をクリックして 色を選択します。カスタムカラーは[詳細]タブから追加できます。
3. 完了したら、[ 変更を適用]をクリックします。

サムネイル ナビゲーション

1. [サムネイル]ナビゲーション セクションをクリックして展開します。
2. 背景色を編集するには、[ 矢印の背景色]セクションの最初のフィールドに 16進値を入力するか、 カラーパレットをクリックして色を選択します。カスタムカラーは、Advancedタブから追加できます。
3. 背景色の透明度を編集するには、[矢印の背景色]セクションの2番目のフィールドに パーセンテージ値 を入力します。透明度を100％にすると不透明になり、0％にすると見えなくなる。 
4. 左右の矢印に使用されているアイコンを置き換えるには、矢印左アイコンおよび矢印右アイコンフィールドの上にある置換をクリックします。右のパネルで、アイコンを選択する。

5. 左右の矢印アイコンの色を編集するには、[ 矢印アイコンの塗りつぶし 色 ]セクションの最初のフィールドに 16進値を入力します。カラーパレットをクリックして色を選択することもできます。カスタムカラーは、Advancedタブから追加できます。
6. 矢印の透明度を設定するには、アイコンの色セクションの2番目のフィールドに、パーセント値を入力します。例えば、透明度が100%の場合、透明度が100%の場合、不透明になり、透明度が0%の場合は表示されません。 
7. サムネイル画像の比率、幅、角の丸みを編集するには、次の手順に従います。
   • [ サムネイル画像]セクションをクリックして展開します。
   • 全てのサムネイル画像に使用される縦横比を設定するには、縦横比ドロップダウンメニューをクリックし、縦横比を選択します。 
   • 全てのサムネイル画像に使用される幅を設定するには、Widthフィールドにピクセル値を入力します。 
   • サムネイル画像の角の丸みを設定するには、ピクセル値を半径フィールドに入力します。値が大きいほど、角が丸く見える。 
8. 完了したら、[ 変更を適用]をクリックします。

スライダーのスタイルを編集

1. スライダーをクリックする。 
2. Spacingセクションを拡大するにはクリックしてください。
3. スライダーの上下にマージンを追加するには、「上のマージン」、「下のマージン」、ピクセル値を入力します。 
4. スライダーにパディングを追加するには、Paddingフィールドにピクセル値を入力します。各面に別々の値を追加するには、「個別に編集」をクリックし、ピクセル値をフィールドに入力する。
5. 完了したら、[ 変更を適用]をクリックします。