「DG-style」で使える各パーツについて説明します。
「一覧ページ並び替え」パーツの概要
記事一覧(カテゴリーやタグなどのタクソノミー系)の記事リストを並び替えできるパーツです。
「一覧ページ並び替え」パーツ追加
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-add.gif)
- パーツ追加から「一覧ページ並び替え」を選択
- テンプレートリストで好きなテンプレートを選択
- エリア選択で追加したいエリアを選択
「一覧ページ並び替え」パーツ設定
並び替え基準
並び替え基準タイトル追加
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-orderby-title.gif)
- 「一覧ページ並び替え」を「マウス右ボタン」でクリック
- 表示されたメニューから「オプション」をクリック
- 「並び替え基準タイトル」を修正する
- 完了
並び替え基準表示項目
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-orderby-item.gif)
- 「並び替え基準」で表示したい項目のみONにする
並び替え基準表示方法
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-orderby-display.gif)
- 「並び替え基準表示方法」より、「セレクトボックス」か「ラジオボタン」を選択
並び替え順番
並び替え順番タイトル
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-order-title.gif)
- 「並び替え順番タイトル」を修正する
並び替え順番表示方法
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-order-display.gif)
- 「並び替え順番表示方法」より、「セレクトボックス」か「ラジオボタン」を選択
記事件数
記事件数表示
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-count-display.gif)
- 「オプション」から「表示件数」を選択
- 「記事件数表示」をONにする
記事件数タイトル
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-count-title.gif)
- 「記事件数タイトル」を修正する
記事件数
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-count-count.gif)
- 「記事件数」で表示させたい件数を設定(半角数字のみ)
※半角コンマ「,」で区切りします。
記事件数表示方法
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-count-type.gif)
- 「並び替え順番表示方法」より、「セレクトボックス」か「ラジオボタン」を選択
パーツClass追加
![](https://dg-style.net/wp-content/uploads/2020/07/01-tax-sort-class.gif)
- オプションの「その他」をクリック
- 「Class追加」に追加したいClassを半角英字から始める「半角英数字、-、_」で入力
- 完了
パーツの共通メニュー
![](https://dg-style.net/wp-content/uploads/2020/11/image-138.png)
パーツラベル編集
![](/wp-content/uploads/2020/06/image-89.png)
![](/wp-content/uploads/2020/08/01-label.gif)
パーツの名前を変えることができます。色んなパーツがある場合は分かりやすい名前をつけて区別しましょう。
![](/wp-content/uploads/2020/06/image-99.png)
エリアロック
![](https://dg-style.net/wp-content/uploads/2020/11/image-134.png)
ロックボタンで、エリアをロックすることで「該当エリア」と「属するすべてのパーツ」を編集できないようにします。
予想せずにパーツを修正するミスを防ぐことができます。
![](https://dg-style.net/wp-content/uploads/2020/11/image-136.png)
![](https://dg-style.net/wp-content/uploads/2020/11/image-135.png)
移動メニュー
![](/wp-content/uploads/2020/06/image-90.png)
![](/wp-content/uploads/2020/08/01-updown-move.gif)
![](/wp-content/uploads/2020/08/01-area-move.gif)
パーツの上下移動や属しているエリアを変えることができます。
※デザイン設定によって、上下ではなく左右に移動する場合があります。
パーツコピーメニュー
![](/wp-content/uploads/2020/06/image-91.png)
![](/wp-content/uploads/2020/08/01-part-copy.gif)
現パーツの設定を全てコピーして、新しいパーツを追加します。
親エリアに複数のパーツがある場合は、一番最後に追加されます。
パーツタイトル
![](/wp-content/uploads/2020/06/image-110.png)
![](/wp-content/uploads/2020/06/01-part-title.gif)
パーツの見だしを追加できます。
テキストパーツと似てますが、テキストパーツは一つのパーツとして使える反面、パーツタイトルは現パーツの一部になるため、他のパーツと連携することができないです。
テンプレート
![](/wp-content/uploads/2020/06/image-92.png)
![](/wp-content/uploads/2020/08/01-part-template.gif)
1クリックで、パーツのデザインを変えられるテンプレートメニューを開きます。簡単にデザインを変えたい場合に使います。
デザイン設定
![](/wp-content/uploads/2020/06/image-93.png)
![](/wp-content/uploads/2020/08/01-part-design.gif)
パーツのデザインを変更できます。
オプション
![](/wp-content/uploads/2020/06/image-94.png)
![](/wp-content/uploads/2020/08/01-part-option.gif)
各パーツ専用のオプションメニューを開きます。上で詳しく説明しています。
イベント
![](/wp-content/uploads/2020/06/image-95.png)
![](/wp-content/uploads/2020/08/01-part-event.gif)
スクロールの動きや画面の位置などで、現パーツにClassを追加することができます。
追加されるClassを元にデザイン設定をすることで以下のことができます。
- パーツが画面の中に入ったら、アニメーションを見せる
- パーツが画面から見えなくなると、パーツを画面上部に固定させる
- スクロール動きに合わせて、要素を固定させる などなど
非表示設定
![](/wp-content/uploads/2020/06/image-96.png)
![](/wp-content/uploads/2020/08/01-part-display.gif)
現パーツを指定したページで非表示させることができます。CSSによる非表示ではなくコード上でなくなります。
特定ページでは表示したくないパーツなどに設定します。
親エリア
![](/wp-content/uploads/2020/06/image-97.png)
![](/wp-content/uploads/2020/08/01-parent.gif)
現パーツが属している親エリアのメニューを表示することができます。
エリアにパーツを追加することで、選択ができなくなっても、エリアメニューを開きたい時に使います。
※エリア専用オプションからは、直下のパーツ/エリアリストからメニューを開くことができます。
パーツ削除
![](/wp-content/uploads/2020/06/image-98.png)
![](/wp-content/uploads/2020/08/01-delete.gif)
現パーツを削除することができます。
エリアの場合、削除するエリアに属している全てのパーツ/エリアも削除します。