一覧ページ並び替えパーツの使い方

一覧ページ並び替えパーツの使い方

「DG-style」で使える各パーツについて説明します。

「一覧ページ並び替え」パーツの概要

記事一覧(カテゴリーやタグなどのタクソノミー系)の記事リストを並び替えできるパーツです。

「一覧ページ並び替え」パーツ追加

  1. パーツ追加から「一覧ページ並び替え」を選択
  2. テンプレートリストで好きなテンプレートを選択
  3. エリア選択で追加したいエリアを選択

「一覧ページ並び替え」パーツ設定

並び替え基準

並び替え基準タイトル追加

  1. 「一覧ページ並び替え」を「マウス右ボタン」でクリック
  2. 表示されたメニューから「オプション」をクリック
  3. 「並び替え基準タイトル」を修正する
  4. 完了

並び替え基準表示項目

  1. 「並び替え基準」で表示したい項目のみONにする

並び替え基準表示方法

  1. 「並び替え基準表示方法」より、「セレクトボックス」か「ラジオボタン」を選択

並び替え順番

並び替え順番タイトル

  1. 「並び替え順番タイトル」を修正する

並び替え順番表示方法

  1. 「並び替え順番表示方法」より、「セレクトボックス」か「ラジオボタン」を選択

記事件数

記事件数表示

  1. 「オプション」から「表示件数」を選択
  2. 「記事件数表示」をONにする

記事件数タイトル

  1. 「記事件数タイトル」を修正する

記事件数

  1. 「記事件数」で表示させたい件数を設定(半角数字のみ)

※半角コンマ「,」で区切りします。

記事件数表示方法

  1. 「並び替え順番表示方法」より、「セレクトボックス」か「ラジオボタン」を選択

パーツClass追加

  1. オプションの「その他」をクリック
  2. 「Class追加」に追加したいClassを半角英字から始める「半角英数字、-、_」で入力
  3. 完了

パーツの共通メニュー

パーツのメニュー全体

パーツラベル編集

ラベル編集ボタン
ラベル変更

パーツの名前を変えることができます。色んなパーツがある場合は分かりやすい名前をつけて区別しましょう。

分かりやすい名前に変えられる

エリアロック

ロックボタン

ロックボタンで、エリアをロックすることで「該当エリア」と「属するすべてのパーツ」を編集できないようにします。

予想せずにパーツを修正するミスを防ぐことができます。

ロックした場合、該当エリア&パーツは「赤色」になる
エリアロックの場合、所属パーツは「オレンジ」になる

移動メニュー

パーツ移動メニュー
上下移動
エリア移動

パーツの上下移動や属しているエリアを変えることができます。

※デザイン設定によって、上下ではなく左右に移動する場合があります。

パーツコピーメニュー

パーツコピーボタン

現パーツの設定を全てコピーして、新しいパーツを追加します。

親エリアに複数のパーツがある場合は、一番最後に追加されます。

パーツタイトル

パーツタイトルメニュー
パーツタイトル例

パーツの見だしを追加できます。

テキストパーツと似てますが、テキストパーツは一つのパーツとして使える反面、パーツタイトルは現パーツの一部になるため、他のパーツと連携することができないです。

テンプレート

テンプレートメニュー
パーツテンプレート適用

1クリックで、パーツのデザインを変えられるテンプレートメニューを開きます。簡単にデザインを変えたい場合に使います。

デザイン設定

デザイン設定メニュー
デザイン設定例

パーツのデザインを変更できます。

オプション

パーツ専用オプション
オプションの表示

各パーツ専用のオプションメニューを開きます。上で詳しく説明しています。

イベント

イベントメニュー
イベント例

スクロールの動きや画面の位置などで、現パーツにClassを追加することができます。

追加されるClassを元にデザイン設定をすることで以下のことができます。

  • パーツが画面の中に入ったら、アニメーションを見せる
  • パーツが画面から見えなくなると、パーツを画面上部に固定させる
  • スクロール動きに合わせて、要素を固定させる などなど

非表示設定

ページごと非表示設定メニュー
非表示例

現パーツを指定したページで非表示させることができます。CSSによる非表示ではなくコード上でなくなります。

特定ページでは表示したくないパーツなどに設定します。

親エリア

現パーツの親エリアメニュー
親エリア例

現パーツが属している親エリアのメニューを表示することができます。

エリアにパーツを追加することで、選択ができなくなっても、エリアメニューを開きたい時に使います。

※エリア専用オプションからは、直下のパーツ/エリアリストからメニューを開くことができます。

パーツ削除

現パーツの削除メニュー
パーツ削除例

現パーツを削除することができます。

エリアの場合、削除するエリアに属している全てのパーツ/エリアも削除します。

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

「チュートリアル」で各種機能の使い方を学ぼう!のサムネイル

「チュートリアル」で各種機能の使い方を学ぼう!

DG-STYLE Ver 4.2.0から実装された「チュートリアル」について説明します。チュートリアルとは?DG-STY

2021-10-11
サイトViewsパーツの使い方のサムネイル

サイトViewsパーツの使い方

「DG-style」で使える各パーツについて説明します。「サイトViews」パーツの概要DG-STYLE Ver4.1.

2021-09-11
【リニューアル】簡単デザイン機能を使ってみよう!

【リニューアル】簡単デザイン機能を使ってみよう!

DG-STYLE 3.0.0から実装された「簡単デザイン」の使い方を説明します。※Ver3.1.0でさらにパワーアップし

2021-06-13
サイトデザインのダウンロード&アップロードのサムネイル

サイトデザインのダウンロード&アップロード

みんさん、こんにちは!Donyです。「DG-STYLE」を利用して作業する場合、バックアップを作って作成できるとしても、

2021-03-09
サイトに「お問い合わせフォーム」を追加しよう!のサムネイル

サイトに「お問い合わせフォーム」を追加しよう!

DG-STYLEでは、テーマデフォルト機能として「お問い合わせフォーム」を追加することができます。サイトビルダーと同じ方

2021-03-01
DG-STYLEの設置&アップデート方法のサムネイル

DG-STYLEの設置&アップデート方法

Wordpressでテーマを設置するのが初めての方のために、テーマの設置方法やアップデート方法について説明します。※ライ

2021-01-01
TOP