サイトを作る時って、TOPページのみに表示したり、記事ページのみ表示したりなどレイアウトによって、非表示にする項目があると思います。

DG-STYLEでは、簡単な設定でパーツやエリアを非表示にすることができます。

非表示例

上記のイメージのように、TOPページでは、ヘッダーの上にスライドショーがありますが、記事ページでは見えないことが分かります。

これはCSSではなく、HTML上で表示されなくなります。さらに非表示になったものはページCSSファイルにも反映されないので、CSSファイルも軽量になり、ページスピードにも影響します。

それではパーツやエリアを非表示する方法について説明します。

エリアの非表示

非表示設定メニューを開く

  1. 非表示したいエリアを「マウス右ボタン」でクリック
  2. メニューから「非表示設定」をクリック

非表示するページを選択

  1. 非表示したいページをOFFにする(例ではTOPページ)
  2. エリアが該当ページから消えたことを確認
  3. 別のページで表示されるかを確認

上記例のように、TOPページからTOPページを非表示にするとすぐ見えなくなりました。

また中にある「テキストパーツ」も一緒に消えてます。

このようにエリアを非表示にした場合はそのエリアに属するパーツ全ても非表示になるので、パーツ一つだけを非表示にする場合にはパーツのみを非表示にしましょう。

パーツの非表示

メニューの開き方はエリアと同じなので、省略します。

非表示するページを選択

  1. 非表示したいページをOFFにする(例ではTOPページ)
  2. エリアが該当ページから消えたことを確認
  3. 別のページで表示されるかを確認

設定方法はエリアと一緒ですが、エリアと違う点としては「非表示したパーツのみ」適用されることですね。

それでは、ちょっと複雑な設定方法を説明します。

カテゴリー非表示設定

カテゴリー非表示メニュー

カテゴリーでは、特定カテゴリーのみを非表示することができます。

また逆に特定カテゴリーのみ表示することができます。それぞれの設定方法を説明します。

指定したカテゴリーのみ非表示にする

  1. 瞳のアイコンのあるボタンをクリックし、OFFにする(例ではカテゴリーページなので消える)
  2. 入力欄に非表示したいカテゴリーを検索して、選択する(例では違うカテゴリーだから表示になる)
  3. ページ検索機能で、非表示にしたカテゴリーに検索して移動する
  4. 指定したカテゴリーのみ非表示になった

思ったより簡単ですね?次は特定カテゴリーのみ表示するようにしてみます。

指定したカテゴリーのみ表示する

  1. 瞳のアイコンのあるボタンをクリックし、ONにする
  2. 入力欄に表示したいカテゴリーを検索して、選択する(例では違うカテゴリーだから非表示になる)
  3. ページ検索機能で、表示にしたカテゴリーに検索して移動する
  4. 指定したカテゴリーのみ表示になった

非表示する場合と違うのは、カテゴリーをONにするだけですね。

例ではカテゴリーのみですが、タグや別途追加したタクソノミーも対応できます。

記事ページ非表示設定

記事ページ非表示メニュー

記事ページでは、2つの方法で表示・非表示を切り替えできます。

  1. 特定記事を指定
  2. 特定カテゴリーに属している記事

それぞれの設定方法を説明します。

特定記事を指定して表示

  1. 瞳のアイコンのあるボタンをクリックし、ONにする
  2. 記事指定する」開く
  3. 入力欄に表示したい記事を検索して、選択する(例では該当記事のため、表示されてる)
  4. 他の記事に移動して表示されないことを確認

特定記事を指定して非表示

  1. 瞳のアイコンのあるボタンをクリックし、OFFにする
  2. 記事指定する」開く
  3. 入力欄に非表示したい記事を検索して、選択する(例では該当記事のため、非表示されてる)
  4. 他の記事に移動して表示されることを確認

特定カテゴリーに属する記事に表示

  1. 瞳のアイコンのあるボタンをクリックし、ONにする
  2. カテゴリー種類で絞る」を開く
  3. 入力欄に表示したいカテゴリーを検索して、選択する(例では該当記事のため、表示されてる)
  4. 他の記事に移動して表示されないことを確認

特定カテゴリーに属する記事に非表示

  1. 瞳のアイコンのあるボタンをクリックし、OFFにする
  2. カテゴリー種類で絞る」を開く
  3. 入力欄に非表示したいカテゴリーを検索して、選択する(例では該当記事のため、非表示されてる)
  4. 他の記事に移動して表示されることを確認

時間を指定して表示・非表示

タイマー非表示メニュー

タイマーでは指定した時間のみ表示されて、その時間以外は非表示される機能です。

期間限定キャンペーンなどに役に立つでしょう。

  1. 「非表示設定」から「タイマー」を選択
  2. 開始時間と終了時間を設定する
  3. 再度ページを開くもしくは他のページへ移動(開始時間前だったら、非表示される)
  4. 設定した開始時間に再度ページを開くか他のページに移動(表示される)

最後に非表示したものを元に戻したいけど、表示されないから設定できない場合がありますね。

そのような時は以下のようにしてみてください。

非表示したパーツorエリアを選択する方法

  1. 非表示したエリアorパーツの「親エリア」を「マウス右ボタン」でクリック
  2. メニューから「オプション」を選択
  3. 「オプション」から「エリア直下のパーツ」を選択(PAGEエリアの場合はすぐ表示されます)
  4. 非表示したエリアorパーツの名前の右にある「メニューアイコン」をクリック
  5. 非表示したエリアorパーツのメニューが開いたら、非表示設定で解除する

修正が終わったら「保存」を忘れずに!

修正が終わったら、サイトビルダー左上にある「保存」ボタンをクリックして保存してくださいね!

「Ctrl」+「S」のショートカットでも保存できる!

慣れている人はすごく便利な「保存」ボタンを押さなくても、キーボードの「Ctrl」+「S」キーで保存できます!

TOP