HPでPCからのアクセスと携帯からのアクセスで違う画像が載るようにしたいのですが…。
HPを作っています。携帯からもアクセスできるようにしているのですが、携帯では「容量を超えました」と画像の全部が載りません。
そこで、PCからのアクセスか、携帯からのアクセスかを自動で振り分け、違う画像が載るようにしたいのです。
たとえば、index.phpではスヌーピーが歩いている動画を載せているのですが、PCではもう少し大きなサイズできれいなものを載せたい。ブログでは、写真のサイズを小さくして全部が載るようにしたい。というわけです。
すごく知識があるわけではないので、「ここにこれを書き込めば」といったご指示があればありがたいです。
もうひとつ、小さいサイズの画像(動画)は別にアップロードしておかなければならないのかどうかも併せて質問させてください。(勝手に小さくしてくれるってのは、ムシが良すぎるでしょうか?)
回答(1)
1.

まず1つ目の方法としては、Webページにおける画像は原則として2種類用意しておきます。そして、デザイン上の画像などに関してはCSSを用いてPCで読み込まれるものとモバイルで読み込まれるものを切り替えます。こうすることで、更新するHTML自体は1枚ですみます。
しかし、上述の場合はimgタグなどを用いて画像を表示する場合にモバイルとPCで切り分けをすることが出来ません。そのため、多くのサイトで見られる方法としてはモバイル用のページとPC用のページを分けて作ります。具体的には
http://akilin134.run.buttobi.net/index.html http://akilin134.run.buttobi.net/mobile/index.htmlのような形です。そしてその振り分けを「.htacess」を利用したり「<link rel="alternate" media="handheld" href="遷移先URL" />」を利用して振り分けます。
ご回答いただき、ありがとうございました。
コメント(4)
>>1
tani.masaru様
回答ありがとうございます。
勉強してみたのですが、よくわかりません。
まず、CSSのモバイル用を用意したら、CSSで画像のサイズ(容量)の変更を指示できるのですか?
そうなれば「更新するHTML自体は1枚ですむ」の意味がわかります。
index.htmlとmobile/index.htmlの2種類のページを作れば、ご指示のあったhtaccessを勉強すれば振り分けられることはわかりましたが、それでは、今あるページすべてを2種類作らなければならないと思うのですが…。
<?
if($is_mobile){・・・
みたいなコマンドはないでしょうか?
>>1
ごめんなさい。試行錯誤で勝手に解決してしまいました。
ちなみに解決は
<?php
if($is_mobile){
echo "<img src='img/モバイル用.gif'>";
}else{
echo "<img src='img/PC用.gif'>";
}
?>
でした。
お騒がせしました。
HTMLというより、phpのHTMLテンプレートの話だったのですね?使用しているアプリケーションはWordPressとかでしょうか。
そうであれば、UAによってページ生成時に切り替えれば良いと思います。
tani.masaru様
質問が不充分で申し訳ありませんでした。



