# 見出し ### 見出し要素について **概要:** PageFlyの見出し要素は、Shopifyストアのページに見出しを追加してスタイルを設定するための重要なツールです。見出しはコンテンツを整理し、可読性を向上させ、サイトの視覚的な魅力を高めます。さらに、適切に構造化された見出しは、検索エンジンがコンテンツを理解しやすくすることで、サイトのSEOを向上させます。 この記事では、PageFlyで**見出し要素**を効果的に使用するための手順をガイドし、ページが見栄え良く、かつ検索エンジン向けに最適化されるようにします。 詳細については、このビデオチュートリアルを参照してください。 {% embed url="" %} ### 見出し要素へのアクセス方法 * **ステップ1:** PageFlyエディターで、左側のメニューにある**Elements**ボタンをクリックします。 * **ステップ2:** PageFlyタブを探し>**Basic**セクションの下にあるドロップダウンメニューの**Heading**要素をクリックします。 * **ステップ3:** 目的の見出しバリアントをページエディターにドラッグアンドドロップします。これで要素の設定を開始できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a4246a1a41bf66a8e17059e324950082b773d03f%2FAD_4nXd86hgPrIlkJ4D9ZFDhEzNoH5fz3T-waLjF9gHkhXdz_N6TOcCAZsvpdWQZ4QG3FMHaD642ZUIL1VfrUb5h8Pwy-feyKsCH0L7XGtYe8W7n2RDavtujbHSFCSch1ts_oCUTTexFksfsZnocDaWiVgkeyesCXGDJAKaDw7h11vlivKg.gif?alt=media) {% hint style="info" %} **注**: 見出し要素には、ほとんどのニーズに対応するためのいくつかのバリエーション（テキストあり、アイコンあり/なし）があります。時間の節約に役立つよう、今後もバリエーションを追加していきます。 {% endhint %} ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e39fd96fbf74585988f564ef17b623ce0bbfa454%2FAD_4nXfg_BWnZRmWFKghbETLTJmouuW4ZbMq9WlhKORhNZ5xN2iQop9v_xXXs2xSGj4cSuLzPunk723UKWtTeCWXHPilyVm1h7Abva70rNdBxs2hNl7ptwmKvtGXB9Fle0lAyGemsnfXN0RzyPtha9U1keyesCXGDJAKaDw7h11vlivKg.png?alt=media) ### 見出し要素の設定方法 見出し要素には、ページの効果的な見出しを作成するのに役立つさまざまなパラメーターがあります。 設定を開始するには、追加した見出し要素をクリックし、次の手順を実行します。 * **General**タブに移動して、テキスト、配置、見出しレベル（H1、H2、H3など）などの全般的な設定を調整します。 * **Styling**タブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcTyD7WP9JMvyjXHrq3GXxoZzBlzGLOxhcY0r0t1lJxMzRG5R6ix1uoq-URkGpLNh1oquwUoZVMJb7aq9qsd7pe5V2IXGRIFdoLpW4GyYBDVP_fVk5rinzZXpkbealW7HwQSA2ftVNnzLW2aHT2iw) #### 一般設定 (General Configuration) Generalタブには、見出し要素をカスタマイズするのに役立ついくつかのパラメーターがあります。 **コンテンツ (Content)** | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

見出しテキスト (Heading Text)

見出しの内容を挿入し、スタイルを設定します。

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-805b642e726acb1600bf4ea37707ab9e951d9c6a%2FAD_4nXcvKKxtU_CiEcgOFT1elk395j7Tv_BWR6xhHrMlAXvt4Ac5ay7GX-PtAN37Rbwbzso4whghzj-5r4vakDM0MQyIWn3rgGxHH_MXQ1Zu_jHWdKIlGB5pECKYxjmPBUSps_DWYR6poHObD_Igvu_vXgkeyesCXGDJAKaDw7h11vlivKg.png?alt=media) | |

HTMLタグ (HTML Tag)

テキストの見出しタグを選択します。（H1が最も大きく、H6が最も小さい）。

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8776a9e9d571d1604174e99633248b4282678beb%2FAD_4nXenPNgklvE7pGfyHrU4AlaR_2KHoNVcf1YDGfZd2yYgNytxxBFR7ocnEmrd17cqCblELlolG1KrE14w5iLppIBYVOU40t3MOMB_0TXpfBi4h7cBtyWa2acDCWK7sNCaoP4VKy2WrVjy77vxU-TWkeyesCXGDJAKaDw7h11vlivKg.png?alt=media) | |

アイコン表示 (Show Icon)

見出しと一緒にアイコンを表示するかどうかを選択します。

アイコンを表示することを選択した場合、アイコンの位置 (Icon position)とアイコンの垂直方向の配置 (Icon vertical Alignment)を設定できます。

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ec47b81146e63c2c6c67a51b60f5bcd23305a88c%2FAD_4nXfX_ttMu5mxRO5P26FpCnDhbtrfFSvYgfxvALV66ypSZ-IN27ySGR-MjqXYe1DwTOt_v3dG2CsR0-X96Vwvz_lvRZR1AY0Fw-p6A8WvFByZh_k9pkw5jD2LcwDbzDya76c3FFykthumbpt82SAdkeyesCXGDJAKaDw7h11vlivKg.png?alt=media) | **アクション (Action)** 見出しにアクションを設定しましょう。 * **URLへ移動 (Go to URL)**: 特定のURLにユーザーを誘導します。 * **ポップアップを開く (Open Pop-up)**: ポップアップウィンドウをトリガーします。 * **セクションへスクロール (Scroll to Section)**: ページの特定のセクションにスクロールします。 * **メール送信 (Send Email)**: ユーザーのメールクライアントを開いてメールを送信します。 * **電話番号へ発信 (Call Number)**: 電話発信を開始します。 ACTIONパラメーターの詳細については、[こちら](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/)で読むことができます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeyZ0lhe8gQmGTG8AUWV9GB0rLYW74bfaMlqYqlXeRY2OwU8PG91Y3wij_S0-mwi0OBkuyjaPvcZqWquHj9TXDDtKkbvl59Kb_rkKDMxroULe4mF5EDSI5iseNchoIHHT5evaUVB9PzxAoB-ywEHwkeyesCXGDJAKaDw7h11vlivKg.png) **トラッキング (Tracking)** このセクションでは、見出し要素のパフォーマンスとユーザーインタラクションを監視するためのさまざまなトラッキングイベントを設定できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-21b4e3836e30eda37c4f47111c14ee4f46d1fa7c%2FAD_4nXfBANyqXNUQCS-L6iWzTDenT1ncbNN1RjvC1VczQKgg0I0AiSu7ha7XjNf0BONgRJ1kvBQyYYdSOJ6FjzXns-sS20ZQ7WNIkPtsGRfEAlR2_fCGCZ9c0P76cRBiVHlK1ZDtJawHr1ifcCwVlhJVnAkeyesCXGDJAKaDw7h11vlivKg.png?alt=media) * **PageFlyイベント (PageFly Events)**: ページのパフォーマンスの全体像を提供します。[こちら](https://help.pagefly.io/manual/page-analytics/?utm_source%3Dapp%26utm_medium%3Dpage-editor%26utm_content%3Delement-inspector)で詳細を読むことができます。 * **Google Analyticsイベント (Google Analytics Event)**: Google Analyticsアカウントでイベントをトラッキングします。[こちら](https://help.pagefly.io/manual/integrate-with-google-analytics-to-track-my-page/)で設定方法を確認できます。 * **Facebook Pixel**: 顧客が要素をクリックしたときにトラッキングします。[こちら](https://help.pagefly.io/manual/setup-facebook-pixel-to-my-page/)で詳細を読むことができます。 **ATTRIBUTES**、**VISIBILITY**、**ANIMATION**パラメーターに関する情報は、この[記事](https://help.pagefly.io/manual/elements-general-settings/)で取得できます。 #### スタイリング設定 (Styling Configuration) **Styling**タブでは、見出し要素の外観をカスタマイズして、ブランドのデザインと一致させることができます。ここでは、フォント、色、サイズ、間隔など、さまざまな視覚的側面を調整して、見出しを目立たせ、プロフェッショナルな外観にすることができます。 詳細については、[スタイリングタブガイド (Styling tab guide)](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 ### よくあるケース #### 希望のフォントが見つからない場合 希望するフォントが見つからない場合は、PageFlyの**Add Custom Font**機能を使用できます。詳細については、この[記事](https://help.pagefly.io/manual/how-to-add-custom-font-in-pagefly/)またはこの[ビデオチュートリアル](https://www.youtube.com/watch?v%3DzJ2OEEdclQc)を確認してください。 #### 見出しサイズの変更 見出しのサイズを変更するには、**Styling**タブ > **Font size**に移動します。スライダーを希望のサイズにドラッグするか、右側の**Font size box**に特定の数値を入力します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-14c9aa479e59c34b35ca2d372c1161bddc4500d3%2FAD_4nXcxiF-GOSOSKQ8Gi3EQlfZsG6hHpkUviJL9olPdl8z8MKqDh5PACdtTCp_qJwrczAikD9QF7SmRdYZjXwXVvSjgkWEQLtq9SouNYuQjq7R1_vKmSOyYqi7jasMYOrSspgbvm1ogRrqrlcDmze0C?alt=media) #### 見出しテキスト配置の変更 テキストの配置を変更するには、**Styling tab > Text Alignment**に移動します。まず、見出しの幅を「**Fill**」に変更する必要があります。その後、4つの配置オプション（Left, Center, Right, or Justify）から選択できます。詳細については、[PageFlyページ上の要素の配置 (Align elements on a PageFly page)](https://help.pagefly.io/manual/align-elements-on-a-page/)の記事を読むことができます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6d1ed3ffa981bd22c484489f0d4184b51bc770b5%2FAD_4nXd56pGeyED2LJXcFI8pgeHW4cwbxgO4IQScdx8Q9K6BSb4OeKapRtOwNqX1kiHL-Z5zV_T76NGDBPA6G1FOptAGx25woKAZ9ZEx0riWJEwUvMD2BQjb6UR7d3WBHwrJkZokcyQSFWWSEzz2eGXUZQ?alt=media) #### 見出し色の変更 テキストの色を変更するには、**Styling tab > Content Color**に移動します。デフォルトで8色がありますが、好みに合わせて色をカスタマイズできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-20a40ed09276b12ea4477a002e053ee3fcfd9df7%2FAD_4nXfJZnXjelpXVxMfkyQmu8abjQFWVeD2rU-x0qODMaNFgIMmqPPNiDao2f56oQWQU5CqIFx7BX5OvnnhyX2jOWo9XxWiQRSDqLe1QMeqrKiS9fWmfo0B35GmU1c8a9kT6ZWJxW1Mh8XF8QVJ2nezkeyesCXGDJAKaDw7h11vlivKg.gif?alt=media) ### よくある質問 **1. 1つのShopifyページにいくつの見出しを含めるべきですか？** 含めるべき見出しの数は、コンテンツの長さと複雑さによって異なります。一般的に、見出しを使用してセクションを区切り、可読性を向上させます。明確な階層を目指し、メインタイトルにはH1見出しを1つ、主要なセクションには複数のH2見出し、サブセクションにはH3またはH4見出しを使用します。 **2. PageFlyの見出し階層レベルは何ですか？** PageFlyはH1からH6までの異なる見出しレベルをサポートしています。H1は最も重要で通常ページのメインタイトルに使用され、H2からH6はサブ見出しやコンテンツのさらなる細分化に使用されます。 **3. 見出しがモバイルフレンドリーであることを確認するにはどうすればよいですか？** PageFlyでは、異なるデバイス向けに見出しをプレビューおよび調整できます。エディターの**Device Preview**オプションを使用して、モバイルでの見出しの外観を確認します。すべてのデバイスで見出しが見栄えが良くなるように、**Styling**タブでフォントサイズ、配置、間隔などの必要な調整を行います。 ### 追加リソース * [PageFlyページでヘッダーとフッターを非表示にする方法 (How to Hide Header and Footer on PageFly Pages?)](https://help.pagefly.io/manual/hide-header-and-footer-on-your-pages/)