---
title: "エディタービューをカスタマイズする"
slug: "customize-the-editor-view"
abstract: "ページビルダーエディターをカスタマイズし、エディター内で表示ペインの表示・非表示を行い、ページ情報を表示するモードを選択でき、最終レイアウトをプレビューできます。"
---
# エディタービューをカスタマイズする

このトピックでは、ページビルダーでエディタービューをカスタマイズする方法について説明します。

## エディターでページを開く

エディターでページを開くには:

1.  上部のツールバーにある **エディター** タブをクリックすると、左側のペインにあるサイトマップが表示されます。
2.  サイトマップで編集したいページやアイテムをクリックしてください。
3.  ページは画面中央のエディターエリアで開きます。
4.  エディターのサイトツリーでページ設定を開くには、:mdiDotsHorizontal: > **Settings**をクリックしてください。

> !注開きたいページのアイテムIDが分かれば、ブラウザのアドレス欄でURLを編集してそのページにアクセスできます。

## 編集者のためにもっとスペースを作ってください

サイドペインを折りたたむことでエディターのスペースを増やすことができます。

右側または左側のパネルを折りたたんだり拡張したりするには:

-   エディタービューの下部で、対応する「Collapse/Expand」アイコン :mdiChevronRight:をクリックしてください。

右側のサイドパネルをドック・アンドックすることもでき、好みや画面要件に合ったページビルダービューを作成できます。

-   右側のパネルはデフォルトでドックされていますが、 **Undock** :mdiDockLeft:をクリックするとキャンバスが完全に右に広がり、右側のパネルは外れてキャンバスの上に浮かびます。
-   パネルがドックから外されている場合、 **Dock** :mdiDockRight:をクリックすると、ページの右側にあるデフォルトのドック位置に戻すことができます。パネルをドックするとキャンバスは元のサイズに戻ります。

## サイトまたは言語を選択してください

プロジェクト名と環境名、現在のサイト、そしてサイトの言語バージョンが上部のツールバーに表示されます。

異なる環境、サイト、言語を選択するには:

-   上部のツールバーで、該当するセレクターをクリックし、ドロップダウンメニューからオプションを選択します。

## デバイスビューの変更

ページビルダーは、サイト上のページにレスポンシブデザインを適用し、表示されるデバイスのサイズに合わせてページを調整します。ページエディターは、異なるデバイス上で現在のページを表示できます。

異なるデバイスレイアウトで現在のページを見るには:

1.  ページのトップツールバーで、現在のページで使いたいデバイスアイコンをクリックします。
    
2.  一部のデバイスは見えない場合があります。表示するには、デバイス一覧を開き、表示したいデバイスの種類を選択してください。
    
    ![Click on the arrow to open the list of device types.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/pages-local-toolbar-devices-dropdown.png)
    

## ページのプレビューを開く

現在のページのプレビューを別のブラウザタブで開くには:

-   上部のツールバーで「 **プレビュー** :mdiEye:」をクリックします。

新しいブラウザは、現在エディターで開いているページを表示します。ライブウェブサイトと同様に、ページのリンクやメニューをクリックすることで他のページへ移動できます。プレビュー機能は、サイトのページの読み取り権限がない人でも、すべてのユーザーが利用可能です。

> !注Chromeブラウザの新しいタブでプレビューを開くと、Inspect Elementsツールを使って異なるビューポートサイズでページを見ることもできます。