2013年7月22日月曜日

ホームページやblogをスマホ対応

最近は、ホームページを制作する際に、スマホにも対応させるのが標準化になりつつあります。

みなさんどうされてますか?

PC版とスマホ版を制作しますか?
プラグイン等で対応してますか?
アメブロなどのサービスは自動的に対応してくれてますが。

SEO(検索上位対策)的にも、Googleが推奨してるらしい「アクセス端末を判別してスタイルシートを割り当てる方法」がいいでしょう。

私がよく使ってるconcrete5の場合ですと、
<head>~<head>間にこう書いてます。

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($browser == true){
$browser = 'sp';
}
?>
<?php if($browser == 'sp'){ ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('smartphone.css')?>"/>
<?php }else{ ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<?php } ?>
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<!--[if IE]>
<link href="<?php echo $this->getStyleSheet('main.css')?>" type="text/css" rel="stylesheet" />
<![endif]-->

そして、main.cssの制作が終わってからsmartphone.cssにコピペして必要なところを書き換えていきます。

widthを100%にしたりです。
(このスマホcssの調整にそこそこ時間かかりますね)


一番見た目がいいのは、スマホ専用のページを別で作ることですが、管理が大変ですよね。

一つ更新したら、PCもスマホも更新されるほうがラクに管理できますよね。

みなさんはどういう方法でされていますか?


※この方法はすぐにやめました。
 今は画面幅に合わせてスタイルシートを読み込む方法にしてます。

0 件のコメント :