# ページエディタ – 要素インスペクター

### ページエディター – 要素インスペクターについて

[PageFly 要素インスペクター](https://help.pagefly.io/manual/page-editor-element-inspector/)は、PageFly ページエディターにおける強力なツールであり、ユーザーがページ要素の設定を正確に構成できます。これは、詳細なコーディング知識なしに PageFly ページの外観や動作をカスタマイズするのに特に役立ちます。

要素インスペクターには4つのコンポーネントがあります：

* [一般設定](https://help.pagefly.io/manual/elements-general-settings/) (一般タブ)
* [スタイル設定](https://help.pagefly.io/manual/elements-style-settings/) (スタイルタブ)
* 要素のパラメータ検索
* ドキュメント表示ボタン

ここでは、PageFly ページエディターで要素インスペクターを効果的に使用する方法をご案内します。

### ページエディター – 要素インスペクターにアクセスする方法

設定したい要素をクリックすると、右側のカラムに要素インスペクターが表示されます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-fd6a4f622d9b1b4218fe88b0eca9ffa35a5cd11f%2FAD_4nXda80U2NYDPB7KODxFRSlfFwVzUsBrPDFXQsHC9w_bRBvBViIUMhA333OGw-hWcTGpJdfTKZgip-GqRv3y41xn9_j8FEYeqypi5aVhswDM3RWx6JAxgo2OV6ijzs6B8YsvZVcl2uIbr2hMDMx2XkeyM6h2Hz6YukoodXXzy6ePgw.gif?alt=media)

### PageFly ページエディターで要素インスペクターを設定する方法

#### 一般タブの設定

**PageFly 要素インスペクター**の**一般タブ**は、ページ要素の機能性やインタラクティビティに影響を与える基本的な設定を構成するために重要です。すべての PageFly 要素が持つ3つの一般設定は以下の通りです：

* **属性**: 要素の HTML コードにあるいくつかのネイティブ属性にカスタム値を設定し、後でカスタム CSS/JS コードで使用できるようにします。
* **表示設定**: このパラメータは、異なるデバイスで要素を非表示にしたい場合に役立ちます。
* **アニメーション**: 要素が表示されるとき、またはマウスカーソルを合わせたときに適用するアニメーションを選択します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfx0G7O8jlEJId85U2YRhtXRnV0pjUwCzKkvrXeDGq-8f50YAMFX0uGm99tR0jPw9-ha1rKHGWjceY_wVXvEjGc9h3Fy1JOiY3srbornEz7Ch3N4I4Z02aB8G567LU6_-j6bXbY9QOs4NcaZqAHQkeyM6h2Hz6YukoodXXzy6ePgw.png)

上記の3つの設定とは別に、**一般**タブには選択された要素固有のパラメータも含まれています。例えば、要素が見出しの場合、これら3つの共通設定に加えて以下の設定があります：

* 見出しテキスト
* HTML タグ
* アイコンを表示
* クリックアクション

より詳細なガイドについては、[要素の一般設定](https://help.pagefly.io/manual/elements-general-settings/)をご覧ください。

#### スタイルタブの設定

**スタイルタブ**には、PageFly ページの要素の美観をカスタマイズするための包括的なオプションがあります：

* タイポグラフィと配置
* * テキストのフォント、サイズ、スタイル、および色
    * 左寄せ、中央寄せ、右寄せのテキスト配置オプション
* 間隔
* * 外側の間隔に対するマージン設定
    * 内側の間隔に対するパディング設定
* 背景
* * 背景色の選択
    * 背景画像または動画の挿入
    * 動的なスクロールビジュアルのためのパララックス効果
* ボーダーとエフェクト
* * ボーダーの色、幅、およびスタイル
    * ドロップシャドウおよびその他の視覚効果
* 高度なスタイル設定: 提供されているオプションを超える詳細なスタイル設定のための Custom CSS

より詳しい情報については、[要素のスタイル設定](https://help.pagefly.io/manual/elements-style-settings/)をご覧ください。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ccea1d7f07888fbf48b81aeb984fa28aad02ee97%2FAD_4nXfwfw-bZ5ySLguKjL0lxtlkHBOoBuIIHhUdpPCR2i4H9aXiiO2xa_w3IQJTzMvveQf_SMAeDGL32tDI5R54Rug-bDUX04_v5QpMXR4xubvpR545FOrWItbEXIrNDhH5Ks6ockIv0oTGUOGt735KLQkeyM6h2Hz6YukoodXXzy6ePgw.png?alt=media)

#### 要素のパラメータ検索

この機能により、要素インスペクター内でパラメータを素早く効率的に検索できます。例えば、「**色**」のようなキーワードを入力すると、背景やボーダーのスタイル設定など、異なる設定でどこに表示されるかを確認できます。これにより、編集やレビューが迅速化されます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a4d38010629ccf8cbe0f4a66071ed6da24ba5543%2FAD_4nXd9_yWiOXZK8fGcVoGDoOAeXw0N5j1BuriTxOYpD_RzSUA2UFdB4KXZrI3_U9qitunG5pmxE8E160nN3Omdu-i4ty7KVcDN-U9O77xXhPUZIdLoWZzQvXzXGMNx0F89v8qlZQJrYZAZ7_zoKHfakeyM6h2Hz6YukoodXXzy6ePgw%20\(1\).gif?alt=media)

#### ドキュメント表示ボタン

**ドキュメント表示**ボタンは、**PageFly ヘルプセンター**に直接接続されており、現在編集している要素に関連する記事やガイドに即座にアクセスできます。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfJVmLMaC28QwKXieqiV1v5du7qlUi8949H_LH4lr_X7l1hGU7tQBn0a73pbXAYbjVpYKKTZAABLT8wO9JBlV6_cNswNCmfayiXELeT7KWqo3jBoymCimuztcC6S5Bt-AVLJnYxXAh1E3nx3hVswkeyM6h2Hz6YukoodXXzy6ePgw.png)

より詳細な情報については、提供されている動画チュートリアルをご覧ください。

{% embed url="<https://youtu.be/Z1J6lqVlGt4?t=217>" %}

### 一般的なケース

* **レスポンシブデザインの調整**: 異なるデバイスでの表示設定を変更し、レイアウトとユーザーエクスペリエンスを最適化します。
* **インタラクティブコンテンツの強化**: ボタンなどの要素にアニメーションを適用してインタラクティビティを強化し、読み込み時やホバー時にトリガーします。
* **カスタムブランディングの適用**: 属性を使用して特定の ID やクラスを挿入し、独自のスタイルやスクリプトを適用します。

### よくある質問

**1. 要素をモバイルデバイスでのみ表示させるにはどうすればよいですか？**

**一般タブ**の**表示設定**を使用して、デバイス固有の表示オプションを選択します。

**2. 要素をサイト内の特定のページにリンクするにはどうすればよいですか？**

**一般タブ**で、**クリックアクション**設定を使用して、ユーザーが要素を操作したときにリダイレクトするリンクまたはアクションを割り当てます。

### 追加リソース

* [PageFly 要素のスタイル設定 | 効果的な編集のための究極ガイド](https://help.pagefly.io/manual/elements-style-settings/)
* [PageFly 要素の一般設定を編集 – 一般タブの設定](https://help.pagefly.io/manual/elements-general-settings/)