サイトViewsパーツの使い方

サイトViewsパーツの使い方

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

「サイトViews」パーツの概要

DG-STYLE Ver4.1.0から追加された、サイト全体のページアクセスカウント数を表示するパーツです。

「サイトViews」パーツ追加

  1. パーツ追加から「サイトViews」を選択
  2. テンプレートリストで好きなテンプレートを選択
  3. エリア選択で追加したいエリアを選択

「サイトViews」パーツ設定

表示する期間

  1. 「サイトViews」を「マウス右ボタン」でクリック
  2. 表示されたメニューから「オプション」をクリック
  3. 「表示する期間」から表示するviewsを選択
  4. 完了

テキスト設定

  1. 「テキスト設定」にテキストを入力
  2. viewsの右側に入力したテキストが反映

パーツ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
【リニューアル】簡単デザイン機能を使ってみよう!

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

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
エリア設定方法のサムネイル

エリア設定方法

パーツをまとめられるエリアを設定方法について説明します。例)エリア機能エリアでできることは以下になります。パーツ追加スラ

2020-11-28
TOP