ページエディター – 要素インスペクター
ページエディター – 要素インスペクターについて
PageFly 要素インスペクターは、PageFly ページエディターにおける強力なツールであり、ユーザーがページ要素の設定を正確に構成できます。これは、詳細なコーディング知識なしに PageFly ページの外観や動作をカスタマイズするのに特に役立ちます。
要素インスペクターには4つのコンポーネントがあります：
ここでは、PageFly ページエディターで要素インスペクターを効果的に使用する方法をご案内します。
ページエディター – 要素インスペクターにアクセスする方法
設定したい要素をクリックすると、右側のカラムに要素インスペクターが表示されます。
PageFly ページエディターで要素インスペクターを設定する方法
一般タブの設定
PageFly 要素インスペクターの一般タブは、ページ要素の機能性やインタラクティビティに影響を与える基本的な設定を構成するために重要です。すべての PageFly 要素が持つ3つの一般設定は以下の通りです：
属性: 要素の HTML コードにあるいくつかのネイティブ属性にカスタム値を設定し、後でカスタム CSS/JS コードで使用できるようにします。
表示設定: このパラメータは、異なるデバイスで要素を非表示にしたい場合に役立ちます。
アニメーション: 要素が表示されるとき、またはマウスカーソルを合わせたときに適用するアニメーションを選択します。
上記の3つの設定とは別に、一般タブには選択された要素固有のパラメータも含まれています。例えば、要素が見出しの場合、これら3つの共通設定に加えて以下の設定があります：
見出しテキスト
HTML タグ
アイコンを表示
クリックアクション
より詳細なガイドについては、要素の一般設定をご覧ください。
スタイルタブの設定
スタイルタブには、PageFly ページの要素の美観をカスタマイズするための包括的なオプションがあります：
タイポグラフィと配置
テキストのフォント、サイズ、スタイル、および色
左寄せ、中央寄せ、右寄せのテキスト配置オプション
間隔
外側の間隔に対するマージン設定
内側の間隔に対するパディング設定
背景
背景色の選択
背景画像または動画の挿入
動的なスクロールビジュアルのためのパララックス効果
ボーダーとエフェクト
ボーダーの色、幅、およびスタイル
ドロップシャドウおよびその他の視覚効果
高度なスタイル設定: 提供されているオプションを超える詳細なスタイル設定のための Custom CSS
より詳しい情報については、要素のスタイル設定をご覧ください。
要素のパラメータ検索
この機能により、要素インスペクター内でパラメータを素早く効率的に検索できます。例えば、「色」のようなキーワードを入力すると、背景やボーダーのスタイル設定など、異なる設定でどこに表示されるかを確認できます。これにより、編集やレビューが迅速化されます。
ドキュメント表示ボタン
ドキュメント表示ボタンは、PageFly ヘルプセンターに直接接続されており、現在編集している要素に関連する記事やガイドに即座にアクセスできます。
より詳細な情報については、提供されている動画チュートリアルをご覧ください。
一般的なケース
レスポンシブデザインの調整: 異なるデバイスでの表示設定を変更し、レイアウトとユーザーエクスペリエンスを最適化します。
インタラクティブコンテンツの強化: ボタンなどの要素にアニメーションを適用してインタラクティビティを強化し、読み込み時やホバー時にトリガーします。
カスタムブランディングの適用: 属性を使用して特定の ID やクラスを挿入し、独自のスタイルやスクリプトを適用します。
よくある質問
1. 要素をモバイルデバイスでのみ表示させるにはどうすればよいですか？
一般タブの表示設定を使用して、デバイス固有の表示オプションを選択します。
2. 要素をサイト内の特定のページにリンクするにはどうすればよいですか？
一般タブで、クリックアクション設定を使用して、ユーザーが要素を操作したときにリダイレクトするリンクまたはアクションを割り当てます。
追加リソース
Last updated
Was this helpful?