スマートフォン用に画像サイズを自動リサイズ

CMSなどを使用してPCサイト用に入力した記事をスマートフォン用に流用する場合、イメージ画像をそのまま使用するとスマートフォンの画面サイズに合わずはみ出てしまいます。
当ブログはDrupalCMSを使用していますが、WordPress、MobavleType等でも同じソースが利用できます。

[手順]

  1. 「/m」(スマートフォンTOP)のURLを有効にする。
  2. デザインをCMSのテンプレートに適用する
  3. PCサイトと、スマートフォンサイトで使用するテンプレートテーマを分ける
  4. スマートフォン用に画像サイズを自動リサイズ ←今回はここ
  5. PCサイトとスマートフォンサイトとでURLが違うが、同じコンテンツを読み込む
    e.g) PC:/smartrelease/70 SP:/m/70
  6. FacebookのいいねボタンをPCサイトとスマートフォンサイトとで同じにする

以下のcssを挿入することで解決することができます。魔法のようなコードですよね!

img {
    max-width: 100%;
    height: auto;
}

しかしDrupal CMSでは以下のスタイルが画像に挿入されてしまい、うまく動作しません。
※DrupalCMSでなくても、Styleが入ってしまうと動作しないので、その場合は削除ください。

<img alt="" src="/sites/default/files/img01.png"
style="width: 500px; height: 290px;" />

次のコードにより上記スタイルを削除します。

<script>
$("div[data-role='page']").live('pagecreate', function(event) {
  for (var i=1; i< document.images.length;i++){
    var filename = document.getElementsByTagName('img')[i].src;
    document.getElementsByTagName('img')[i].removeAttribute('style');
  }
});
</script>

ページの読み込みが終わったら$("ID名").live('pagecreate', function(event) { })が実行されます。
画像数を取得しforでループし、画像のスタイルを順番にremoveAttribute('style')で外していきます。

以上でスマートフォンの画面サイズに合わせて自動で画像がリサイズされます。

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。