EN
検索中...

フォルダー一覧ページのデザイン

その フォルダ ページのコレクションを一覧ページまたはドロップダウンとして作成できます。

フォルダーは、複数のメニュー項目を保持し、それらを視覚的なレイアウト (グリッド、スライドショー、垂直または水平スクロール、およびその他の多くのレイアウト) で表示するコンテナーと考え​​てください。

デモ フォルダを参照してください。

一度持っている フォルダを作成しましたでは、以下に示すようにそのデザインを管理できます。

フォルダ スタイルの管理:

  • 入力する  フォルダ タイトル (1) 検索バー。
  • 以下を行うには、 フォルダ (2) 下 サイト メニュー項目。 

  • または、 ウェブサイト セクションでは、 三つの点 (1) フォルダの上にカーソルを置いたときに表示されるアイコン。
  • ソフトウェアの制限をクリック 設定 （2）オプション
  • これはあなたを フォルダ設定 クリックすると 設計 （3）タブを開く フォルダデザイン 引き出し。

ここには、次の設計オプションが表示されます。 

フォルダのレイアウト

  1. レイアウト フォルダに適用するレイアウトを選択してください。サイト上でフォルダ内のサブアイテムを表示するためのレイアウトは20種類以上から選択できます。
  2. 幅（Width） – フォルダの幅を全幅、ボックス、またはサイト幅として設定します。
    • '全幅' は余白を残さず全幅をカバーしながらフォルダを表示します。
    • '箱入りの' 画面の左右にある程度のパディングを残してフォルダを表示します。
    • 'サイト幅' で指定できます 設計 セクション。 そこで固定幅を指定できます。
      指定した固定幅を守ってフォルダを表示します。
  3. グリッド間隔 – グリッド レイアウトのサブアイテム間のスペースを指定します。 (0 ～ 250 ピクセル)
  4. コーナー半径 – 角の半径を調整して丸型または四角型にすることで、フォルダー内のグリッド項目の角をカスタマイズします。
  5. タグによるフィルターを表示 – これをチェックして フォルダーのサブアイテムでタグによるフィルターを有効にする.
  6. タグの配置 – 画面上のタグの配置を設定します。

タイトル

ショーのタイトル (1): タイトルとタグを使用して、グリッド イメージの下にサブアイテム タイトルを有効にすることができます。

  • オフ： グリッドのタイトルとタグをオフにするには、これを選択します。
  • ホバー時： これを選択すると、ホバー時にタイトルが表示されます。 タイトルの配置を選択できます。
  •  下の画像: これを選択すると、グリッド イメージの下にタイトルとタグが表示されます。 タイトルとタグの配置を選択し (2)、タグの表示を選択できます (3)。

タイトルフォント

  1. 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。 
  2. をセットする  Title フォルダー内の項目のフォント スタイル。
  3. フォントの色： タイトルのフォントの色を指定します。

イメージボーダー

方法を参照してください 画像の境界線を管理します。

グリルスタイル

  1. ホバー効果： ホバー効果は、グリッド レイアウトでのみ使用できます。 グリッド モードでカーソルを合わせると、次のオプションを表示できます。
    • 無効： グリッド モードのサブアイテムには影響しません。
    • 色： グリッド モードでのサブアイテムのオーバーレイ カラーのみ。
    • 色とアイコン: アイコン付きサブアイテムのオーバーレイカラー用。
  2. ホバーカラー: ホバー時の色を指定。
    • 色を指定するには、 選択した色. これを選択すると、下に色を指定するオプションが表示されます。
    • 選択 画像のアクセントカラー ホバー時に画像のアクセント カラーが表示されるようにします。 これを選択すると、画像のアクセント カラーの不透明度を指定するオプションが下に表示されます。
  3. ベースカラー： グリッドベースの色を指定します。
    • 色を指定するには、 選択した色. これを選択すると、下に色を指定するオプションが表示されます。
    • 選択 画像のアクセントカラー 画像のアクセントカラーがベースカラーになるように。 これを選択すると、画像のアクセント カラーの不透明度を指定するオプションが下に表示されます。
  4. グリッド アイコン: ドロップダウンリストから Plus, 矢印, クロス or 眼 アイコン。 このアイコンは、グリッド イメージにカーソルを合わせると表示されます。
  5. アイコンの色: グリッド アイコンの色を指定します。

たとえば、 このフォルダをチェックしてください 「グリッド ラベル - タイトルとタグ」で「正方形の大きなフォルダー レイアウト」が選択されている場合:

ブレッドクラムナビゲーション

について知る ブレッドクラム ナビゲーションの詳細。

モバイルディスプレイ

  1. 特定します サブ項目間のスペース モバイル用のグリッドレイアウト。(0〜250ピクセル)
  2. 選択する 列の数 モバイル デバイスでフォルダー内のアイテムを表示します。

スライドショー (「フルイメージ スライダー」レイアウトのみ)

  1. 動作： ここからスライドショーを有効にします。
  2. スライドショー速度: スライドショーの遷移速度を設定します (1 ～ 10 秒)。
  3. スライドショーのトランジション: スライドショーのトランジション タイプを指定します。 「水平スワイプ」または「フェード」オプションを適用できます。

タグ：

お探しのものが見つかりませんか？

Pixpaエキスパートに連絡してください。

お問い合わせ
Pixpa Studioがリニューアルされました。現在、ヘルプ記事のスクリーンショットをすべて更新中です。