WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法15種
スマートフォンなどのモバイル端末にWebサイトを対応させるのに、CSS3のMedia Queries（メディアクエリ）を使って、レスポンシブデザインにすることが多いと思います。しかし、Google Adsenseなどの広告は表示がはみ出てしまったりします。 スマートフォンなどのモバイル端末には、別の表示にしたり、ブラウザ別に表示を変えたい時があるのではないでしょうか？例えば、PCサイトでGoogle Adsenseの728×90を使っているけどiPhoneやAndroidなどのモバイルでは、レイアウトが崩れるので300×250に変えたいな等です。 今回の投稿では、WordPressでスマートフォン別、ブラウザ別に条件分岐する方法を集めました。 スマートフォン・タブレット端末 スマートフォン・タブレット端末別の条件分岐方法です。 モバイル端末で表示を変えるwp_is_mobile() PCブ
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
外部CSSを1枚追加して、ブログをスマホ最適化する5つのフロー | Mnemoniqs Web Designer Blog : Web Design and Web Development
レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化するまでの流れを書いておきます。スマホ用のCSSをスマホにだけ読み込ませて、全体のCSSを上書きするだけなので、ブログのデザインによっては結構手軽に出来ます。 はじめにスマホ最適化後の要素配置を考える <head>にviewport設定とスマホ用CSSの記述を書く 固定幅をリキッドデザインで組みなおす フォントのサイズ、マージン、中央･水平揃えを調整 画像を2倍のサイズで用意する はじめにスマホ最適化後の要素配置を考える スマホは画面も小さいし、容量が重いとそれだけページの表示速度も落ちます。 ロゴ・メニュー・記事など最低限の要素だけ残し、あとはdisplay:none;で消してしまいましょう。 このブログのトップだと、オレンジで囲んだのがスマホで表示させない部分です。 残った要素を、最
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;lt;link rel
ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
