# 区切り線 ### 区切り線 (Divider) 要素について 概要: **区切り線要素**は、ページ上の2つの要素またはセクションを区切るためにデザインされた改行線です。この機能は、訪問者、特に複数のセクションがあるページの可読性とスキャンしやすさを向上させることで、コンバージョン率を高めるのに役立ちます。 この記事では、区切り線要素について紹介し、ニーズに合わせてカスタマイズするためのガイダンスを提供します。 ### 区切り線 (Divider) 要素へのアクセス方法 ページエディターから区切り線要素にアクセスするには、いくつかのステップが必要です。 * ステップ1: **要素**アイコンをクリックします。 * ステップ2: PageFlyタブで、リストの**区切り線**要素をクリックします。 * ステップ3: 選択した要素をレイアウトにドラッグアンドドロップして編集します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcZI2oazFxRpRdAFZ9HqieyuBBP7wteETKtkqsQEWlsRk8BN0pXzQq42_0HxK_rOZ0LTLVSPiDXqq0sW88guzzPv1eBXHHDQ7jyCKd-sQ8s9AR3zBoF6Cxpe-pmCwRPeaAchpfi8kZr4qenwQGZ2wkeyzxPGuPb5nI8XDqhxA9yGng.gif) 現在、PageFlyでは好みに合わせて4つのオプションの区切り線を提供しています。時間を節約するために、追加のオプションが間もなく追加されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-38aabd910ffbafcce2cba2b3ad81aa6573951f65%2FAD_4nXeta8_3WvGJF8useOp8h00CU6fGjVBoxERSW8ks713GK3eoZDTCHDWRHhjCbvNCcDRrxTp87v46rJj3Qw6iOeIE1ZuHHh01QlQ6ntgDLCwfkarmE6ORfVrGuCa8Jb76AA6mgVlgkFqSZNBjAUNYCgkeyzxPGuPb5nI8XDqhxA9yGng.png?alt=media) PageFlyで区切り線要素にアクセスしてカスタマイズする方法については、以下のビデオをご覧ください。 {% embed url="" %} ### 区切り線 (Divider) 要素の設定方法 #### 一般設定 PageFlyでは、コンバージョン率最適化のために線の表示を調整できます。線を編集するには、線を選択してパラメータにアクセスします。 以下の手順で線のカスタマイズを開始します。 * ステップ1: 区切り線をクリックして、以下に示すモーダルを開きます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1543c7f7fa9a86f6d1443baa68c1492cd1865262%2FAD_4nXcZQHPF6zhvT5mE011WaKJp5EfLNGhRzVd39Yfw5kNJH44SWBoj3YVokVA0E5slLZ24lt0gEQ14StD0sgcfHnLE3ClQ_cIB5Inmy0mnJW-390OUOtrDvsgBs98PTg71w-85g4grl_5m7pX8jBSB7QkeyzxPGuPb5nI8XDqhxA9yGng.png?alt=media) * ステップ2: **区切り線タイプ**を選択します。利用可能なオプションの中から1つを選んでカスタマイズできます。 * **プレーン**: 追加コンテンツのないシンプルな直線。 * **アイコン:** アイコン付きのシンプルな線。 * **テキスト**: テキスト付きのシンプルな線。 * **シンボル:** シンボル付きのシンプルな線。 アイコン、テキスト、シンボルタイプのカスタマイズの詳細については、以下の表を参照してください。 | **アイコン**: 区切り線タイプから「アイコン」を選択し、アイコンの位置を選びます。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-484a92d6f3fe319474f8debcfdc107b15a147d10%2FAD_4nXfBWIG7JHbUkx7IiXQhO-eLHWG0fmnMNYUHdW2_7YYlIAmm8g64rN8NCyWjgimc8PFXK_CZRnJojxmsDp38rs9BUGCVvvJ99xaixp4Ndr5TplpdhHg7Dcy0Wkf7gNpFdVoBOUYkCy7PtFN6AZ8gUwkeyzxPGuPb5nI8XDqhxA9yGng.gif?alt=media) 表示したいアイコンを選択するには、2つの方法があります。 - アイコンをクリックして利用可能なオプションから選択します。 - 検索バーにアイコン名を入力します。 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6a6d049e5aa06d1647e5fca9508e5b4d47a68187%2FAD_4nXe-Bv40jzzXKB5A01FE5WXrL3YH2JQ3h7VlxLnQ_F45j1eSubTn4MIROxfsH0SrTmm_iviebGZi4XFcJqifiIZff1WBxNp3WEvcEYbXzgQr_g_BmCt4muv3u4AMrXcefxAbisB1p9_b1Up23gUdkeyzxPGuPb5nI8XDqhxA9yGng.gif?alt=media) 次に、サイズバーをスライドしてアイコンのサイズを変更します。 注：最大値は1000px、最小値は0pxです。 | | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0b1267248667d079185d95885f9dc8d3cf2dab54%2FAD_4nXcS0OTOmdEjwc0dE-sI6Pnm2_5WYoJ6LMrEChj2q4pTpuHLuvCC9oJ8KxRLqw7nMjwcCfdC2KJnKu-wXztuzWaw3QkqeDiYvGssNFO5jCJZSpjUKCBgNlFIaE6Dh-9uT9kErGzCYpYeETOWrlbqngkeyzxPGuPb5nI8XDqhxA9yGng.gif?alt=media) | | | **テキスト**: 区切り線タイプから「テキスト」を選択し、テキストの位置を選びます。 | テキストをクリックしてコンテンツを編集します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-692bc9fbc0f858de7411e66836a1c6305a726616%2FAD_4nXey57y9PqKyJ1CNejxYfUF8wEMY6F54zYOT1dvbAx-DvuQWsR-L8He4C-LQY4DOQVlSFopSFNvSqXjGtPe8GqTmz0F5xKWeOOZaajKXqZ6KIF-F4OodXyopTAzb6sizAuoJjYGI-F0GwUg7dklH_QkeyzxPGuPb5nI8XDqhxA9yGng.gif?alt=media) | | | **シンボル**: 区切り線タイプから「シンボル」を選択し、シンボルの位置を選びます。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-dee6adbc8f0c03e8c1193c579a731477391b4875%2FAD_4nXcFBlLxdZKlxmu0btJr0GrcwyRxpX0Omhk48SYwz7v0bHU38v-roLuKusMADJFxI5LBzF2QQNaHE52hXWaZB3zo664c8IWeb_A4uUe4Di0eZFA6D0CSYGp_ldjWFjpp_kSYKZ4sTBQvE90FJbrIkeyzxPGuPb5nI8XDqhxA9yGng.gif?alt=media) シンボルをクリックして利用可能なシンボルを選択します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5b434bdac06cef1f0bb22003429b8242d0fb82fa%2FAD_4nXcJETIaONhnH79YqMWBMELuwznRRkH5CN90PuB5X2RAk3Z_OrDLmr0QzpJjQJ7nBauTXhKT8dyQ3qe2ZnxHXSTNoNKYZRr3Hnx-zfM8SR-XmSc74bj-mrOhrpHtcH8Xek-NY7p1hk3L4R1eFc8owQkeyzxPGuPb5nI8XDqhxA9yGng.gif?alt=media) サイズバーをスライドしてシンボルのサイズを変更します。 注：最大値は1000px、最小値は0pxです。 | | #### スタイル設定 スタイル設定ガイドを調べるには、[こちら](https://help.pagefly.io/manual/elements-style-settings/)を確認してください。 ### よくある問題 * テーマの互換性: Minimal、Debut、Boundlessなどの一部のテーマは、カスタム区切り線要素をサポートしていない場合があり、レイアウトの問題や正しくレンダリングされないことがあります。 ### よくある質問 **1. PageFlyの区切り線要素とは何ですか？** 区切り線要素は、コンテンツ、セクション、その他のコンポーネントを分割するために使用され、それによってページ訪問者の可読性とスキャンしやすさを向上させます。 **2. 線にアイコンを追加できますか？** はい。4つの区切り線タイプの中にアイコンオプションがあります。希望するタイプを選択し、表示したいようにスタイル設定してください。 **3. PageFlyがサポートする区切り線のタイプはいくつありますか？** 区切り線のタイプは4つあります。 **4. 「線の太さ (Line Weight)」の別の用語は何ですか？** 線の厚さ (Line Thickness)。