画像要素

画像要素について

その 画像 GemPages の要素を使用すると、ページに単一の画像を表示できます。これは、製品、バナー、ブランド ビジュアル、プロモーション、または信頼バッジを紹介するのに最適です。

製品のハイライトを強調したり、ブランドの美観を説明したり、セクション間の視覚的な区切りを作成したりする場合でも、画像要素を使用すると、デバイス間で画像がどのように表示されるかを完全に制御できます。

新しい画像を簡単にアップロードしたり、Shopify ファイルから既存の画像を再利用したり、コーディングなしでサイズ、位置、境界線、アニメーションをカスタマイズしたりできます。

ページに画像要素を追加するにはどうすればいいですか?

ステップ1： あなたにログインする Shopify管理者 > GemPagesダッシュボード > ページ.

ステップ2： GemPagesで作成したすべてのページをここで確認できます。対象のページをクリックしてください エディタを開きます。

新しいページを作成したい場合は、 新しいページを作成する ページを最初から作成するか、あらかじめデザインされたテンプレートから選択します。

ステップ3： 左のサイドバーから 画像 検索バーに画像要素をドラッグし、希望の位置にドロップします。

設定タブを構成する

イメージエレメントは柔軟な 画像設定 サイズ、形状、応答性を簡単に制御できます。

形式

画像の視覚的なスタイルを選択します。

• 矩形： デフォルトの長方形
• サークル： 画像を完全な円形に自動的に切り取ります

ソース

画像ファイルをアップロードまたは選択します。以下の操作が可能です。

• 詳しくはこちら 画像をアップロード画像のURLを貼り付けるか、 ギャラリーを閲覧する メディアから選択します。
• アップロードすると、参照または編集用に画像のURLが下に表示されます。

サイズ

レイアウトと応答性の観点から画像の表示方法を制御します。

フレーム: 定義済みのアスペクト比を選択するか、カスタムのアスペクト比を使用します。

• 正方形である
• 垂直
• 水平な
• 元の （画像の本来の寸法を維持します）
• カスタム額装 （幅と高さを手動で設定）

幅高さ:

• セットイン ピクセル (px) または 割合 （％）
• トグル ロックアイコン アスペクト比を維持または破壊する

形状

デザインに合わせて視覚的な強化を施して画像コンテナのスタイルを設定します。

ボーダー: 画像の周囲に枠線を追加します。カスタマイズ:

• 色圏: 任意のHEXカラーを選択
• 厚さ: ピクセル値を設定する
• ストロークスタイル: 実線、破線、点線

コーナー: 境界線の半径を調整して画像の角を丸くします。以下の操作が可能です。

• すべてのコーナーに同じ半径を適用する
• 値をロック解除して各コーナーを個別にスタイル設定します

Shadow: 影の効果を追加して、奥行きや背景との分離を表現します。設定:

• タイプ: 外側、内側、または中央
• リーダーシップ: 影の角度を制御する
• 色圏
• 距離, ブラー, サイズ

リンク

オンに切り替えて画像をクリック可能にし、画像をクリックした後に追加するアクションを選択します。

SEO

画像のアクセシビリティと検索エンジンのパフォーマンスを向上します。

• 代替テキスト: 画像の説明（スクリーンリーダーや検索エンジンで使用）
• 画像のタイトル: ツールチップテキストとして表示されるオプションのタイトル

LCPを最適化する

読み込みを最適化してパフォーマンス スコアを向上させます。

品質: 圧縮レベルを選択してください:

• 最高級 （最高品質）
• ハイ （デフォルト、バランス）
• 技法 （パフォーマンスが重視されるページの場合）
• カスタム額装 （高度な圧縮設定）

プリロード: 画像がスクロールせずに見える範囲にあり、Largest Contentful Paint (LCP) に貢献している場合に有効にします。

整列

コンテナー内で画像を左、中央、または右に配置します。

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

トラブルシューティング: ページに画像が表示されない

アップロードした画像がエディターまたはライブ ページに表示されない場合は、以下のチェックを試してください。

一般的な原因と解決策

画像要素のベストプラクティス

画像の上にテキストを配置する

画像にテキストを重ねたバナーの作成に興味がある場合は、専用のビデオ チュートリアルがあります。ステップ バイ ステップのガイダンスについては、以下のビデオをご覧ください。

画像をクリック可能にする

画像をクリック可能にしたりインタラクティブにすると、ユーザーエクスペリエンスとエンゲージメントが向上します。

もっと詳しく知る： テキストまたは画像をクリック可能にする

画像要素に関するよくある質問

1. 画像の自動拡大縮小を停止するにはどうすればよいですか?

画像を拡大縮小したくない場合は、 サイズ 画像設定の「画像サイズ」セクションで、幅と高さをパーセンテージ（%）ではなくピクセル（px）で設定します。これにより、すべてのデバイスで画像が固定サイズになります。

2. GemPages の画像設定はどこにありますか?

エディタ内の画像をクリックするだけで、 設定タブ 左側のサイドバーに表示されます。そこから、サイズ、フレーム、ボーダー、影、リンクオプションなど、画像に関するすべての設定を調整できます。

3. 画像をクリック可能にできますか?

はい。設定タブで下にスクロールして リンク セクションを開いてオンに切り替えます。画像をページ、外部URL、セクションアンカー、ポップアップ、メール、さらには電話番号にリンクできます。

4. SEO のために画像に代替テキストを追加するにはどうすればよいですか?

SEO 画像設定のセクションで、説明的な代替テキストを入力してください。これにより、スクリーンリーダーのアクセシビリティが向上し、検索エンジンが画像を理解しやすくなります。

5. アップロード後に画像がぼやけて見えるのはなぜですか?

画像がぼやけている場合は、 品質 LCPの最適化の設定。 最高級 通常は品質を上げることで問題は解決しますが、アップロードしたソース ファイルが高解像度であることを確認してください。

6. 画像の上にテキストを直接重ねることはできますか?

画像要素自体は直接テキストオーバーレイをサポートしていません。そのためには、 ヒーローバナー要素を使用すると、画像の上にテキスト、ボタン、その他の要素を配置できます。

7. GemPages でページに画像を追加するにはどうすればよいですか?

テンプレートに画像を追加するには、 画像要素 エディター内のページレイアウトに画像を挿入できます。新しいファイルをアップロードしたり、Shopifyメディアライブラリからファイルを選択したり、画像のURLを貼り付けたりできます。これにより、商品、コレクション、ランディングページのテンプレートを視覚的にカスタマイズできます。

8. ページを公開した後に画像を更新するにはどうすればよいですか?

エディタ内の画像をクリックするだけです。 ソース セクションでは、新しい画像をアップロードしたり、メディアライブラリから画像を置き換えたり、設定を調整したりできます。更新したら、 Save の三脚と パブリッシュ 変更をストアにリアルタイムで適用します。

9. 「クリック後のアクション」を「ページを開く」に設定した場合、「次のリンク」とはどういう意味ですか?

「リンクのフォロー: はい/いいえ」設定は、検索エンジンが画像に添付されたハイパーリンクをたどることを許可するかどうかを制御します。

• はい： 検索エンジン（Googleなど）は、このリンクから対象ページへ移動できます。リンク先がインデックス登録したい重要なページ（商品ページやコレクションページなど）の場合に使用します。
• いいえ： 追加 rel="nofollow" リンクにタグを付けます。これにより検索エンジンは リンクをたどったり、リンク権限を渡したりします。

10. 画像要素を使用して WhatsApp をリンクするにはどうすればよいですか?

WhatsAppアイコンなどの画像をチャットボタンにすることができます。画像要素を追加し、WhatsAppのロゴをアップロードして、 リンク オプションを選択します。

WhatsApp リンクには次の形式を使用します: https://wa.me/<your-number> 例えば： https://wa.me/15551234567.

顧客が画像をクリックすると、あなたの番号との WhatsApp チャットが開きます。

11. GemPages で画像のアップロードが失敗するのはなぜですか?