Pixpa では、ギャラリーに画像を表示する方法を細かく制御できます。
ギャラリー スタイル オプションを使用すると、ギャラリー レイアウトと組み合わせて、ギャラリーでの画像の表示を完全に制御できます。
ヒント： ギャラリー サイト全体のスタイル オプションは、作成するすべての新しいギャラリーに自動的に適用されます。
も参照してください： 特定のギャラリーでサイト全体のギャラリー スタイルをオーバーライドする方法は?
ここで扱われる内容：
サイト全体のギャラリー オプションをカスタマイズできます。 設計 (1) セクション。
「デザイン」セクションに入ったら、 をクリックします。 ギャラリー (2) タブ。
あるいは、スタジオの検索オプションを使用することもできます。
- Enter ギャラリー (1) 検索バー。
- 関連する結果から、 デザイン – ギャラリー オプション (2)。
ギャラリーのレイアウト
- レイアウト ： ギャラリーに適用するレイアウトを選択します。
ギャラリーのレイアウトを変更する方法を学ぶ. - 幅（Width） : ギャラリーの幅を選択します。
- '全幅' は余白を残さずに幅全体をカバーしながらギャラリーを表示します。
- '箱入りの' は、画面の左右にある程度のパディングを残してギャラリーを表示します。
- 'サイト幅' は設計セクションで指定できます。 ここで固定幅を指定できます。
指定された固定幅を守ってギャラリーを表示します。
グリルスタイル
- グリッド間隔: グリッド レイアウトの画像間のガター スペースを指定します。 (0 ～ 250 ピクセル)
- 画像コーナー半径 : 境界半径を適用して、ギャラリー グリッドで画像の角を丸くします。
例えば、 ランタン テーマのホーム ギャラリーのグリッド間隔は 142px です。
画像のコーナー半径を適用すると、次のように画像のエッジが丸くなります。 越えて テンプレート。
グリッドの色
ベースの不透明度: 画像のアクセント カラーとしてホバー タイプを選択した場合は、グリッド ベースの不透明度をここから設定します。
- ベース： 基本色はグリッド形成に使用され、画像が読み込まれる前の一瞬だけ表示されます。 グリッドのベース カラーには XNUMX つのオプションがあります。
- 色を選択してください: グリッド ベースに特定の色を設定するには、このオプションを選択します。 グリッド ベースの色と不透明度を指定します。
- アクセントの色 ： グリッドのベースには画像のアクセント カラーを使用します。 これにより、各画像のアクセント カラーを使用してマルチカラー グリッドが表示されます。
- ベースの不透明度: アクセントカラーとしてベースタイプを選択した場合は、ここからグリッドベースの不透明度を設定します。
- ホバー: これは、カーソルを画像上に置いたときのグリッドに影響します。
- 色を選択してください: グリッド イメージに対して [カラーを選択] を選択した場合は、デフォルトのホバー カラーとその不透明度を設定します。
- アクセントの色 ： グリッドのベースには画像のアクセント カラーを使用します。 これにより、各画像のアクセント カラーを使用してマルチカラー グリッドが表示されます。
- ホバーの不透明度: アクセントカラーとしてホバータイプを選択した場合は、ここからグリッドベースの不透明度を設定します。
画像のアクセント カラーは、画像をアップロードするときに選択される画像の主要な色です。
グリッド ホバー効果
ホバー効果は、グリッド レイアウトでのみ使用されます。 グリッド モードでカーソルを合わせると、次のオプションを表示できます。
- 無効 – グリッド モードでは画像に影響を与えません。
- 色圏 – グリッド モードでの画像のホバー カラーのみ。
- 色と画像のタイトル – 画像のホバーの色と画像のタイトル。 ホバーの色と画像のタイトルのテキストの色/フォント/サイズ/太さを 次のオプション.
- 色とアイコン – アイコン付きの画像ホバーカラー。
- 色、画像のタイトル、アイコン – 画像ホバーの色、画像のタイトル、およびアイコンについて。 プラス、矢印、十字、目などのアイコンを画像に追加することもできます。
ホバーアイコン
- ホバー アイコンは、ギャラリーのグリッド レイアウトでのみ使用されます。 グリッド モードで画像にアイコンを表示することを選択できます。
- オプションは、プラス、アロー、クロス、アイです。 これは、アイコンが 効果を置きます ドロップダウン。
イメージタイトル
- これは、ホバー時に画像のタイトルを表示することを選択した場合に適用されます。
イメージボーダー
Pixpa は、画像の周囲に境界線を追加することで Web サイトの視覚的な魅力を高めることができる、多用途の画像境界線機能を提供します。 こちらをクリックしてください 画像の枠線について詳しく知る
ライトボックスディスプレイ
1. ライトボックスを開く
- 画像がグリッドで表示されている場合、画像をクリックするとライトボックス モード (フル画像表示) で画像が開きます。
- ここから有効または無効にできます。
動作中のライトボックス モードを確認する:
2. ズームを有効にする
- ライトボックス モードでの画像のズームを有効/無効にします。
- ズーム機能は、デスクトップだけでなくモバイル Web サイトでも機能します。
3. 表示オプション
- フル イメージ表示でのイメージの表示方法を選択します。
- からお選びいただけます 画像のみ表示, サムネイル付き画像, 下部にキャプションがある画像, 右にキャプション付きの画像.
例えば、、ギャラリー 画像のみ表示.
例えば、、ギャラリー サムネイル付きの画像を表示.
例えば、、ギャラリー にキャプション付きの画像を表示 ボトム.
例えば、、ギャラリー キャプション付きの画像を表示 右.
4. オーバーレイカラーオプション
その オーバーレイの色 ライトボックス モードで画像を表示したときに表示される背景色です。オーバーレイの色を調整すると、Web サイトのデザインの外観と雰囲気にマッチし、ライトボックス ビューで画像を統一感のある洗練されたプレゼンテーションにすることができます。
- 選択する カスタムカラー ライトボックスモードで表示されるすべての画像に特定の背景色を設定するオプション。 オーバーレイの色 設定。 さらに詳しく.
- 選択する アクセントカラー 各画像のアクセントトーンから固有の色を適用します。必要に応じて、画像ごとに個別にカスタマイズできます。 さらに詳しく.
- アクセントカラーオプションを選択した場合は、 不透明度 (背景色の透明度)。
5. 画像ビュー
ライトボックスの表示モードを指定します –
- スケーリングとフィット – 画像は、使用可能なブラウザー領域に収まるように拡大縮小され、画像全体が表示されます。
- フルブリード – イメージは、使用可能なブラウザ領域全体を埋めるようにサイズ変更されます – この全画面表示を実現する際に、イメージの一部が切り取られる場合があります。
例えば、、ギャラリー sケールアンドフィットモード 画像が利用可能なブラウザーの高さに収まる場所。
例えば、、ギャラリー フルブリード モード 使用可能なブラウザーの幅を満たすために画像が引き伸ばされます。
6.コントロール
ライトボックス ビューで、画像情報アイコン、ギャラリー情報アイコン、十字アイコン、ブラウザー フィット アイコンなどのナビゲーション コントロールを表示する方法を選択します。オプションは次のとおりです。
- 常に表示 (常に画像の上にナビゲーション コントロールを表示します)
- ホバー時に表示 (ナビゲーション コントロールは、画面上でカーソルを動かしたときにのみ表示されます)
- 隠されました (ナビゲーション コントロールは表示されません)。
例えば、、ギャラリー 常に表示 ナビゲーション コントロール。
例えば、、ギャラリー 表示する ホバー時 ナビゲーション コントロール。
例えば、、ギャラリー 隠されました ナビゲーション コントロール。
7. 次/前のスタイル
フル イメージ表示で、ナビゲーション矢印の表示方法を選択します。
- フローティング : ナビゲーション矢印はフローティングになります。 カーソルを画像上に移動し、矢印が表示されたら画面をクリックして画像間を移動します。
- シェブロン
- 矢印
- 円の中に矢印を表示
- 隠されました : ナビゲーション矢印を完全に無効にします。
8.画像ファイル名
- 画像をライトボックス モードで表示するときにファイル名を表示するように選択します。
実際の動作を参照してください。
9. 最大画像サイズ
この設定はギャラリー画像が表示される最大解像度を制御します。 ライトボックスモード。 次のオプションから選択できます。
- 自動– 閲覧者の画面とデバイスの解像度に応じて画像サイズを自動的に調整します。システムが最適な画像バージョンをインテリジェントに選択し、最適な鮮明さとパフォーマンスを実現します。
- 固定サイズ – 2048ピクセル、1500ピクセル、1000ピクセル、800ピクセル、または500ピクセル。固定サイズを選択すると、すべてのライトボックス画像は、ユーザーのデバイスまたは画面サイズに応じて、その最大解像度で表示されます。
元の画像が アップロードされた解像度は小さい 選択したサイズよりも大きい場合は、 元の解像度拡大・アップスケールされません。
スライドショーの設定
- スライドショー： ソフトウェアの制限をクリック 自動再生 フル画像ビューアでスライドショーを自動的に開始します。 スライドショーを無効にすることもできます。
- 速度 ： トランジションの速度を選択します。 1秒から10秒まで選択できます。
- 遷移 ： スライドショーのトランジションスタイルを選択します。
実際のスライドショーをご覧ください:
色合いのオプション
この機能により、 アクセントカラー 画像を表示するときに背景として使用される画像 ライトボックスモードこれにより、背景が画像のアクセントカラーに揃えられ、視覚的なエクスペリエンスが向上します。
- アクセントカラーを色合いとして使用する:
- デフォルトでは、 ライトボックスの背景色 ライトボックスモードで画像を表示するときに適用されます。
- このオプションを有効にすると、 アクセントカラー 画像に関連付けられた色がライトボックスの背景色として使用され、よりダイナミックで視覚的に統一された外観が実現します。
- 色合いの不透明度:
- 不透明度を調整できます アクセントカラーの色合い 色合いスライダーを使用します。
- 不透明度を調整すると、 アクセントカラー ライトボックスの背景色を使用すると、シームレスでプロフェッショナルな美観を実現できます。
モバイルディスプレイ
- として表示: ギャラリーを 画像スライダーまたはモバイル ビューのグリッド モード。
- グリッド列: からお選びいただけます 1 列または 2 列のビュー モバイル ビューでのグリッド表示用。
- グリッド間隔: をセットする ガッター 画像の間 モバイルビュー.
関連記事：