CMSなどを使用してPCサイト用に入力した記事をスマートフォン用に流用する場合、イメージ画像をそのまま使用するとスマートフォンの画面サイズに合わずはみ出てしまいます。
当ブログはDrupalCMSを使用していますが、WordPress、MobavleType等でも同じソースが利用できます。
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
[手順]
- 「/m」(スマートフォンTOP)のURLを有効にする。
- デザインをCMSのテンプレートに適用する
- PCサイトと、スマートフォンサイトで使用するテンプレートテーマを分ける
- スマートフォン用に画像サイズを自動リサイズ ←今回はここ
- PCサイトとスマートフォンサイトとでURLが違うが、同じコンテンツを読み込む
e.g) PC：/smartrelease/70 SP：/m/70 - 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')で外していきます。
以上でスマートフォンの画面サイズに合わせて自動で画像がリサイズされます。
