解決済

clip!clip!
Ads By Google

HPでPCからのアクセスと携帯からのアクセスで違う画像が載るようにしたいのですが…。

HPを作っています。

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

2009-08-15 19:01の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2009-08-16 22:56:54ベスト
まず、現状のHTML自体が無茶苦茶なので、今の状況で何処を修正するという話は難しいです。PCでの表示においてもブラウザによって見え方が大きく異なっています。したがって下記には方法を書きます。

まず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" />」を利用して振り分けます。



ご回答いただき、ありがとうございました。

Ads By Google

コメント(4)

2009-08-17 15:27:26

>>1
tani.masaru様
回答ありがとうございます。
勉強してみたのですが、よくわかりません。
まず、CSSのモバイル用を用意したら、CSSで画像のサイズ(容量)の変更を指示できるのですか?
そうなれば「更新するHTML自体は1枚ですむ」の意味がわかります。
index.htmlとmobile/index.htmlの2種類のページを作れば、ご指示のあったhtaccessを勉強すれば振り分けられることはわかりましたが、それでは、今あるページすべてを2種類作らなければならないと思うのですが…。

 <?
 if($is_mobile){・・・
みたいなコマンドはないでしょうか?

2009-08-17 16:36:43

>>1
ごめんなさい。試行錯誤で勝手に解決してしまいました。
ちなみに解決は
<?php
if($is_mobile){
echo "<img src='img/モバイル用.gif'>";
}else{
echo "<img src='img/PC用.gif'>";
}
?>
でした。
お騒がせしました。

2009-08-21 17:39:54

HTMLというより、phpのHTMLテンプレートの話だったのですね?使用しているアプリケーションはWordPressとかでしょうか。

そうであれば、UAによってページ生成時に切り替えれば良いと思います。

2009-08-21 22:39:52

tani.masaru様
質問が不充分で申し訳ありませんでした。

トラックバック(2)

トラックバックURL: