記事画像要素

記事画像要素について

その 記事画像要素 主に 記事リスト要素 記事のサムネイルや注目の画像を紹介します。 

この要素は、視覚的に魅力的な記事リストを作成し、全体的なユーザー エクスペリエンスを向上させるのに役立ちます。個々の記事ページに追加することもできますが、そのコンテキストではあまり一般的ではありません。

記事画像要素は、記事リスト要素内に配置した場合にのみ使用できます。

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

ステップ1： アクセス GemPagesダッシュボード  > ページをクリックし、対象のページをクリックしてエディターを見つけます。

ステップ2： 左側のサイドバーから、 記事画像要素 ページ上の希望の位置にドラッグ アンド ドロップします。

ステップ3： 要素をクリックすると設定が開き、さらにカスタマイズできます。

記事画像要素設定タブを構成する

その 記事画像要素 デザインと機能のニーズに合わせてカスタマイズできるオプションがいくつか含まれています。

記事のソース

ボックスをクリックして、記事リスト要素の記事ソースを構成します。

画像

記事の注目画像をページ上でどのように表示するかを選択します。

• 画像を塗りつぶす: 画像はフレームのサイズに合わせてサイズ変更またはトリミングされます。

画像のアスペクト比がフレームと異なる場合、画像の一部が切り取られることがあります。

• 画像を合わせる: 画像は、元のアスペクト比を維持しながら、フレーム内に完全に収まるように縮小または拡大されます。 

これにより、画像全体が表示されるようになりますが、アスペクト比がフレームと一致しない場合は、端の周囲にスペース (パディング) が残る可能性があります。

サイズ

割合: 画像の切り抜きまたは表示方法を選択します。

• 正方形である: 幅と高さが等しい。
• 垂直: 幅よりも高さの方が大きい。
• 水平な: 高さよりも幅が広い。
• 元の: 画像の元のアスペクト比を維持します。
• カスタム額装: 幅と高さを手動で調整します。

幅と高さ: 画像の正確な寸法をピクセル単位で設定します。

形状

• ボーダー: この要素の境界線の色、太さ、線を変更できます。
• コーナー: 断面の角は、四角形、丸形、丸い形から選択できます。角の半径はお好みに合わせて調整できます。
• Shadow: 記事リストセクションに影を追加し、影の表示（サイズ、色、ぼかし、距離）を調整できます。

リンク

デフォルトでは、 リンク セクションでは、クリック後のアクションが「記事へ」に変更することができます。にスクロールします」と入力し、必要に応じて対象セクションを挿入します。 

SEO

• 代替テキスト: アクセシビリティと SEO のために画像の説明を入力します。このテキストは、画像の読み込みに失敗した場合に表示されるもので、検索エンジンがコンテンツを理解するのに役立ちます。
• イメージタイトル: ユーザーが画像の上にマウスを移動したときに表示されるツールヒントを追加し、追加のコンテキストや情報を提供します。
  

LCPを最適化する

この設定により、ページの 最大のContentful Paint（LCP） スコアは、パフォーマンスと SEO にとって重要な Core Web Vitals メトリックです。

品質： 鮮明さと読み込み速度のバランスをとるために適切な画像圧縮レベルを選択します。

• 最高級品: 最高品質、ファイルサイズが大きい。
• 高（デフォルト）： バランスのとれた品質とパフォーマンス。
• 媒体： 読み込みが高速化しますが、画像の多いページでは品質が若干低下します。
• カスタム： 高度な制御のために独自の圧縮設定を定義します。

プリロード： 画像がスクロールせずに見える範囲の上に表示され、ページ上の主要な視覚要素の 1 つである場合は、このオプションを有効にします。

整列

見出しの配置を調整して読みやすくします。左揃え、中央揃え、右揃えから選択できます。

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.