【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

gettyimagesの埋め込み画像をレスポンシブに使う方法

gettyimagesの埋め込み画像をレスポンシブに使う方法

gettyimageをレスポンシブに

大手ストックフォトサイト「gettyimages」の画像を、非商用限定ながら無料でブログに埋め込むことが出来るようになりました。

埋め込み投稿が可能な画像を検索する

無題クリップ_031114_111952_AM

手順は</>ボタンをクリックして画像を読み込むiframeタグを取得し、貼り付けるだけ。


これでgettyimagesの画像がブログに表示されます。

gettyimagesの画像を「レスポンシブ」にする

ここからが本題です。

iframeで画像を読み込んでいるため、画像のサイズが固定されたままとなります。

これではレスポンシブWEBデザインのサイトで画像が正常に表示されないケースが出てきます。

というわけで簡単にレスポンシブ化させてみました。

YouTube向けCSSの使いまわしてOK!

この実装ですが、実はYouTube動画のレスポンシブ化記事のコードを100%使いまわしています。

*元記事:3ステップでできる!CSSを使って動画をレスポンシブ化する方法

作業はGettyImagesのiframeを>div class=”youtube”<で囲い、以下のCSSを追加するだけ。

元記事でclass=”youtube”を使用している関係上のクラス値設定ですが、他のiframe要素にも使用できますので「iframe-cnt」などに書き換えるのも手かもしれません。

<div class="youtube">
<iframe src="//embed.gettyimages.com/embed/175545377?et=0H30dRUM4Eig2JDBuSzKKA&sig=adGnjOQbXKKXyBlnOkR-aKawOBEefCDqqsk2LzaKSbQ=" width="507" height="407" frameborder="0" scrolling="no"></iframe>
</div>
.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

YouTube動画と異なり縦横比が一定でないため、元のコードよりも小さいサイズになる可能性があります。

ですがはみ出して全体が見えなくなるよりは遥かにマシですので、取り急ぎ対応されたい方は是非。


”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+