ホーム › Home

PCサイトを【ipadやiphone】で表示した時のいろいろ

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: CSS3, IE, ipad, iphone

PCサイトを【ipadやiphone】で表示した時、さまざまな表示崩れが発覚したので、その症例と修正のメモ。

背景画像が表示されない

大きすぎる背景画像はipadやiphone表示されなくなってしまう。MAX 2メガピクセル。

修正は画像を2メガピクセル以内になるように分割し、CSS3の背景画像の複数設置方法を使って対処した。過去記事参照
CSS3は、IE6〜9までは対応していないので「CSS3 PIE」というプラグインを当てる。
だが、今回は効き目が無かったため、IE用スタイルシートを別途用意し、条件分岐

<!--[if lt IE 9]> 
      〜
 <![endif]-->

をつかって読み込ませた。

ちなみにIEでは「CSS3 PIE」をつかっても機能するのは以下の5つだけ。
● border-radius
● box-shadow
● border-image
● CSS3 Backgrounds
● Gradients

スクロールがおかしい

pcサイトでよく使う、表示範囲内で入りきらない要素をスクロールさせるための「overflow:scroll」。
これはipadやiphoneでは
「スクロールしにくい。ios4ではスクロールを2本指でしなくてはならない。」
「スクロールバーが出ない。」
などの不具合が出る。

ios5からは、スタイル要素に対して「-webkit-overflow-scrolling:touch;」を書き足すことで解消。
（ただしoverflow-yやoverflow-xの切り分けは無視されてしまうのだそうです。）

a:hoverは効果無し

a:hoverは効かないのでどうしても変化させたい時は、opacityを使うと良い。

IE対策には
filter: alpha(opacity=70); /* ie 6 7 */
-ms-filter: “alpha(opacity=70)”; /* ie 8 */

文字が大きくなる

モバイルsafariで見ると文字が大きくなる

body {-webkit-text-size-adjust: none;}
* {-webkit-text-size-adjust:100%;}
スタイル要素に-webkit-text-size-adjust: none;を書き足す。

などとする。

［訂正］noneじゃなくて100％にする

line-heightが効かなかった

テキストの「line-height」が効かない箇所があった。
書体を指定したら効いた。（bodyにいれているだけではダメな場合があるらしい。）

webフォントは使えない。

webフォントは使えない。

PC、スマートフォン、タブレット、振り分け

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: ipad, iphone, ホームページ

==================================================
iPhone3G　　480×320px
iPhone4　　960×640px
iPhone5　　1,136×640px

iPad（Retinaディスプレイ） 2048×1536ピクセル
iPad・iPad2　　1024×768ピクセル

iPad miniはRetinaディスプレイではない。
解像度はiPad2と同じ768×1024ピクセル。
iPad2は9.7インチ、iPad miniは7.9インチです。
=====================================================

iPhoneもipadも解像度が上がってしまったため、メディアクエリ（Media Queries）での識別が困難になってきた。
「userAgent」で振り分けることが増えそうだ。
ユーザーエージェント「userAgent」で振り分けるにはJavaScript、php、.htaccessを使う方法がある。
php、.htaccessはサーバが対応している必要がある。

1.JavaScriptで振り分ける

※document.writeでCSSのリンクをデバイスごとに振り分ける。
以下はiPhone,iPad,Androiには「style_ip.css」を読み込ませ、PCには「style_pc.css」を読み込ませている。

<script type="text/javascript"> 
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') != -1 || ua.indexOf('iPad') != -1 || ua.indexOf('Android') != -1){
//iPhone & iPad 
document.write('<link rel="stylesheet" href="style_ip.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="style_pc.css">');
}
</script>

※navigator.userAgentとindexOf(”)を使う。以下はiPhone、ipod、Androidは”test”ディレクトリへ異動させている。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
location.href = '/test/';
}
</script>

その他

2.PHPで振り分ける

3.htaccessで振り分ける

htaccessを使ったページ移動はブラウザにストレスを与えず、リダイレクトでPCページに戻ってしまうようなエラーも防げるそうだ。

〜参考にさせていただきました。〜
http://wakana.me/?p=43
http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html

背景画像の複数指定の一例 CSS3

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: CSS3, ipad

pcに作成したサイトの背景画像が、ipadでは表示されていなかった。
タテpx×ヨコpx=2メガピクセル以内にしないと表示されないそうだ。
3つにわけて、CSS3の複数指定で対処。

〜背景画像の複数指定の一例〜

#page{
	margin: 0px auto;
	padding: 0px;
	background-image: url(images/bg-1.jpg),url(images/bg-2.jpg),url(images/bg-3.jpg );
	background-repeat: no-repeat;
	background-position: center 0px , center 1000px , center 1500px;
}

または

#page{
	margin: 0px auto;
	padding: 0px;
	background-image: url(images/bg-1.jpg),url(images/bg-2.jpg),url(images/bg-3.jpg );
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center 0px , center 1000px , center 1500px;
}

floatで並べた数個のボックスのセンタリング

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: CSS, dreamweaver, IE

center

親ボックスの中に、フロートしている小ボックス（数は増減する）を親ボックスに対してセンターに並べたい。

text-align: center;　margin: 0 auto;は効果が無く、
display: inline-block;（IE非対応）やdisplay: table;（IE6,IE7非対応）が使えない状況の時は
下記のようにする。

以下は基本的骨格のみ

.aaa {
  position: relative;
  overflow: hidden;
}

.aaa ul {
  position: relative;
  left: 50%;
  float: left;
}

.aaa ul li {
  position: relative;
  left: -50%;
  float: left;
}

ul要素を右に50%移動、li要素を左に50%移動

うまく行きました！

なぜこれでうまくいくのかはこちらのサイトに説明がありましたよ。

——-その後
IEでもdisplay: inline-block;を使えるようにする方法がみつかった。
スターハックなのですが
li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

これはまだ試してないです。

wordpressでエラーが出たら

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: wordpress

wordpressでエラーが出たら、

function.phpの中に
全角空白が無いか、
最後の行に無用な改行が無いか調べる。
あったら削除する。

同、function.php以外も調べる。
データの一番上の行は空けない。
コメントは消してみる。

［ローカルからサーバへ移した場合］
スタイルシートのTheme URI: http://▲▲▲▲▲/ がローカルのままになっていないかどうか。

画像は、cssにおいて background: urlは絶対パスにする。

クリック時の点線を消したいのに…

投稿日: 作成者: keep — 1件のコメント ↓
カテゴリー: CSS, IE, jQuery

IE（Internet Explorer）において、リンクのついた画像をクリックしたときに出る点線は
a{outline:none;}　では効果が無い。困るよ、ほんと。

いろいろ調べて

jquery.linkscubber.jsというものを使い

$(document).ready(function(){$("a").bind("focus",function(){if(this.blur)this.blur();});});

を実行させればいいのだというので試してみたが、IE7では効果が無かった。
（$ は使わないで jQuery と置き換えた）

さらに、下記スクリプトも効果が無かった。

window.onload=function(){
　a=document.getElementsByTagName("a");
　for(i=0;i<a.length;i++){
　　a[i].onfocus=function(){this.blur();}
　}
　area=document.getElementsByTagName("area");
　for(i=0;i<area.length;i++){
　　area[i].onfocus=function(){this.blur();}
　}
}

さらにさらに調べて

<a href="URL" onFocus="if(this.blur)this.blur()">リンク</a>

というように「onfocus〜blur()”」をいちいち付け足して行く方法があった。
これは有効だったが、
これを使うとタブ移動ができなくなるそうで、

解決策がないではないか…..。

ということで、ここは使い勝手を優先にしてそのままにしました。

※テストしたのはwordpress3.4を使ったオリジナルデザインサイトです。

革風、縫い目などのテクスチャ［fireworks］

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: fireworks, デザイン一般

革風、縫い目の表現はこちらのサイトを参考にさせていただきました。
楽しかった。

label01

XAMPPやMAMPのアップグレード状況

投稿日: 作成者: keep
カテゴリー: mac、system

mac版のXAMPPのバージョンが1.7.3で止まっている。
http://sourceforge.net/projects/xampp/files/

XAMPP_gu

一方MAMPは
http://www.mamp.info/en/mamp/index.html
manp_g

…….MAMPに戻そうかな。

カスタムフィールドテンプレート2

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: plug-in, wordpress

カスタムフィールドテンプレートの
画像のためのテンプレートコンテンツ設定で

[画像1]
type = file
label = 画像をアップロードしてください。

画像のアップロード用フィールド作成はこれだけでも済む。
PCに不慣れなお客様にはこれだけでいいと思う。

[画像1]
type = file
label = 画像をアップロードしてください。
mediaLibrary = true
mediaPicker = true

mediaLibrary = true、mediaPicker = true、2項目足すと
メディアライブラリーとメデイアピッカーが使えるようになる。

不要な「.Ds_store」をなんとかしたい

投稿日: 作成者: keep — コメントはありません ↓
カテゴリー: mac、system

不要な「.Ds_store」を削除する。

「.Ds_store」ファイルを削除する方法はいくつかあるそうです。
ターミナルを使って削除する場合は以下のコマンドを実行してFinderを再起動。

find Desktop/対象となるディレクトリ名 -name ".DS_Store" -print -exec rm {} ";"　と打ってenter

killall Finder　と打ってenter

★削除ツールを使う方法もあり。
MacForkCleaner
動作も軽快でした。ほとんど消しました。（すっきり！！）

「.Ds_store」を作成しないようにする。

せっかくきれいにしたので、今後は「.Ds_store」を作らせないように設定したい。
ターミナルを起動して、以下のコマンドを実行。

defaults write com.apple.desktopservices DSDontWriteNetworkStores true

元に戻すには以下を実行する。

defaults write com.apple.desktopservices DSDontWriteNetworkStores false

※ホルダーの中味のアイコンサイズや間隔、プレビューなどは変わってしまう場合あり