# ブログ記事画像 ### ブログ記事画像要素について 概要: [Blog Post Image](https://help.pagefly.io/manual/shopify-elements-blog-post-image/) 要素は、Shopifyブログ記事の画像をページに表示することで、SEOランキングを向上させるために設計されています。 ブログ記事画像要素を使用して、ブログ記事の画像をブログ記事以外のページに表示したり、ブログ記事ページで使用したりできます。 ### ブログ記事画像要素へのアクセス方法 ブログ記事画像要素にアクセスするには、以下の手順に従います。 * **ステップ1**: 「**Element**」ボタンアイコンをクリックします。 * **ステップ2**: 「**Shopify**」タブに切り替えます。 * **ステップ3**: 「**Blog post**」セクションまでスクロールし、「**Blog post image**」オプションを選択します。 * **ステップ4**: ブログ記事画像要素をページエディターにドラッグアンドドロップして使用を開始します。 注: サイドバーで要素を探す代わりに、検索機能を使用して検索することもできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2e9b7ede12d30641914ad816370f78c4e2968d3d%2FAD_4nXdJwfFj7to4dHT2-zUt7tbxOtCuehTCgwTbOn8jkKMk1P4NbqLfF5S0Jdk4tTPzXxbIsud-DvlQh_GnaanAFTM4S6HL8Uv9LBv5lKkrzSMGC5zoFjb-rGW1n0Cl7TJ0_yeKWoZtZGDC6YQOWXAxRwkeyX-matIlOIZdnf3suCxGOxQ.gif?alt=media) ### ブログ記事画像要素の設定方法 ブログ記事画像要素には、コンテンツの表示を細かく調整して最高のコンバージョン率を実現するためのパラメーターが付属しています。 レイアウト内の要素を選択して、そのパラメーターを確認します。 #### 一般設定 (General Settings) \| **Blog Post Source**: ブログ記事画像要素をエディターページにドラッグアンドドロップすると、デフォルトでBlog Post Sourceセクションが選択されます。ブログ記事要素をプレビューするには、ページを初めて公開してください。後でいつでも非公開にできます。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-dae085b212f61bca451e5f54bae8d1aed7f52e2f%2FAD_4nXfOCZwkuINdKz2xLyn5IIgesNTrG-C9kihioKdfM0uIwCtBo0-JWRgsLZ9jc-Rn1Ecmn7oUVJnRf6Xqv0N5qqHktRUfda7KL5-fN2sOWOyd2eqggnXmZpn8TuvipbnAROiMJw30L5ZPigEd3QUFsgkeyX-matIlOIZdnf3suCxGOxQ.png?alt=media) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Custom Blog Post**: ストアに表示したい画像が含まれているブログ記事を選択します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-eebbc61aa5323fc475ee3403a8b05d0e863312bb%2FAD_4nXfvqIkPgDfGloh9W5fLxl4p9xsqIW0RByNlDVyt257z4gAyHvp5MCYJyhUsUoCS1Qr1gRrilnZSWobKe4WRIRxIAeuVk6fl8-DdiWCZyokG-Qhv1QqiiW_O6RHMPchg2tzqWJHBaB9dFpubrITYQkeyX-matIlOIZdnf3suCxGOxQ.gif?alt=media) |\ \| **Enable Full Width**: 画像をコンテナ（例: カラム）の幅に合わせます。 **Image Width**: Enable Full Width をオフにしたときに画像幅を調整できます。 |\ | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9bb47380be32a362bcfad5a6848044178af260fe%2FAD_4nXc2r0v7ShnTX5s8TrGwtq9a8Hg8014ss58sYJ6zownYqS9ptujxjjq3FFWc4I3yXiVQvvycx9a7GSVEfT68DCdhRla0IzXltkbvrNuKdlfE2ID-yBUCmNV-AZQU6SNNhXg-pRSQCClwArAHGNxh2wkeyX-matIlOIZdnf3suCxGOxQ.gif?alt=media) |\ \| **Image Ratio**: オリジナル、正方形、カスタムの3種類から選択できます。 |\ | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfTL-FwW156IHNcb50phNAy1wRYMlQnH_OBBUfg1lzo7WYIKunk-qnCL6nEe428U4g8G1_b8I3Z0fZvytXxaqe4gfQuVKIpsGFFx5cD72-4SWgwncCigp-AyJ24IGciclnX9wnsreOzkUKHhyDvwkeyX-matIlOIZdnf3suCxGOxQ.png) |\ \| **Image Height**: Image Ratio で Custom を選択したときに画像高さを調整できます。 |\ | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1aec2bc5e77ae8e946e9be2148d15c6a4cdc9a0f%2FAD_4nXfQ9DUo7lYzZSUGSi9-NGrifZd_z8UyG_kSq-HrTEFRL5MEqT0D6IbDz_iVQVbASqlsDeuHfDQRKik3jMW_KeAwsC2iMYcRkT3XHqz5LaW1-x8qwdJ29RUtU62HlrjOCnIJuLiTlgXZDjIy7f-vgkeyX-matIlOIZdnf3suCxGOxQ.gif?alt=media) |\ \| **Image loading**: ブログ記事画像の読み込みタイプを選択します。次の3種類があります。 - **Lazy Loading**: ビューポートに表示されたときにのみ画像を読み込み、PageSpeedを向上させます。 - **Preload**: ページが読み込まれるとすぐに画像を読み込み、LCP（Largest Contentful Paint）を向上させます。 - **Standard**: 読み込み時間とユーザーエクスペリエンスのバランスをとります。 |\ | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e78153dd657175c1dd06aa195e0eaddb17386f25%2FAD_4nXf_VNcF-yermptuAI3Ja7lyGiv531-RH7OQfjAnP9MBsyi05zc17s8vJt6BwQ-7QydNPuchlNJRUy8uE9pYU7T3qdpbfy2CwcI9BCw-fHR4SKj8o-CMPMIhQ53A-KSwGlV9TA977HzEMNM-lfJHkeyX-matIlOIZdnf3suCxGOxQ.png?alt=media) |\ \| **Image Object Fit**: Square および Custom タイプでは、コンテナに合わせて画像のサイズを変更できます。 | Cover: 画像がコンテナに合わせて引き伸ばされます | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1f255af529b3edb872b822e1a51564508426c71a%2FAD_4nXcBXxj_1f-HhsW-dSqX1t-p-Ki9z6rapmHEmCIk_bK0iDtWdpj0MFiAblXl8-zbYJFLkucWl3_QKe2T_VIndXCcKkFrS9WC37mmn3WkJeLLfxN1OCMY6MtSQqvAxzwuQE255VU1bsFigI5_er0e3gkeyX-matIlOIZdnf3suCxGOxQ.png?alt=media) Contain: 画像がコンテナ内に収まるように縮小されます ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1d17ac630f14050b1465ac01331d2e8272b6b7b8%2FAD_4nXe-tdzsaMiJRbIv6RG_zys-ufzjLzozLuvalsfNr3ZHzJohguYEt11-zUgVWXYFNlvVss4VYMoqyLZhq8Uk4E9AWj_1DK_s_REP-LGS-qvdYQ6SFrymll_xHHgyca8VTWAluZ7vcIu420558N9YtAkeyX-matIlOIZdnf3suCxGOxQ.png?alt=media) |\ \| **Image Position**: Square および Custom タイプでは、コンテナ内の画像の位置を選択および指定できます。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-57dc7b715297e353e49ecdbad4823baf61462e93%2FAD_4nXcOu-8P5THGfZge6J7M7zGEULLkyrVmYOEk4MFaTV_FuT_qg1I97c6zXLzrAD33MZbI75nsYKTcx6gRizBwgtXa5Nyf_lY-VSwtoCCPuKqkfLIxBCiqXcpvBCbfAWUiMA8Iii4rtEmCyPR1beEHewkeyX-matIlOIZdnf3suCxGOxQ.gif?alt=media) |\ \| **Link to Blog**: この機能をオンにすると、顧客が画像をクリックしたときにブログ記事に直接移動できるようになります。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3a380afeecd371fb837f46cb104cadad82691b1b%2FAD_4nXdl37bj8G1OuJUBRoEkb165_I3ty-jCs4IMBcm5G5M7QjYomcp8kmPjovn5-bPWM89TG5PDt7Fyug0Ruzc4P8oD7GCPu86cyLdhiRE51DudBBP4k_0b1obQ_I37MIVI0kZPx2jnGmK0Ho_ckFjGswkeyX-matIlOIZdnf3suCxGOxQ.png?alt=media) | **ATTRIBUTES、VISIBILITY、ANIMATION** パラメーターの詳細については、[こちら](https://help.pagefly.io/manual/elements-general-settings/)をご確認ください。 #### スタイル設定 (Styling Settings) スタイルタブの詳細については、こちらの[リンク](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 ### 一般的なケース 時々、画像が異なるデバイスや画面サイズで適切にスケーリングされず、歪みや切断が発生する場合があります。この問題は、CSSの競合、不適切なテーマ設定、または画像寸法の不整合によって発生する可能性があります。画像のサイズを適切に変更し、レスポンシブに対応させることで、この問題を軽減できます。 ### よくある質問 (FAQ) **1. Shopifyブログ記事画像とは何ですか？** ブログ記事画像要素は、Shopifyブログ記事の画像をページに表示することで、SEOランキングを向上させるために設計されています。 **2. ブログ記事にはPNGとJPGのどちらを使用すべきですか？** JPGは画像サイズが小さく、容量をあまり消費しないため、ウェブ上での読み込みが高速です。 **3. Shopifyの画像がぼやけるのはなぜですか？** Shopifyがページ読み込み時間を改善するために、画像のサイズや容量を下げることがあります。 ### その他のリソース * [Creating a Shopify Blog Post with PageFly in 2024](https://help.pagefly.io/manual/create-a-blog-post-page/) * [How to Edit Shopify Blog Post Content Element](https://help.pagefly.io/manual/shopify-elements-blog-post-content/) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/blog-posts/shopify-elements-blog-post-image.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.