この1,2年でスマホって急速に普及していきましたね。
最初はガラケーで十分。スマホとか使いにくそう。
とか言ってた私も、いつの間にかスマホになってるしｗ
2015の世帯普及率は50.8％だそうです。
これってすごくないですか？
スポンサーリンク
[ad]
スマホ普及率がどんどん伸びてる
実際のところ、1世帯に何台スマホがあっても普及率は変わらないので、この数字で想像する以上に持ってる人は多いってことです。
タブレット型端末機器の場合、世帯普及率は23％。
こちらも2014年には16.8％だったので、伸び率で言えばすごいです。
サイトのレスポンシブ化は絶対必要
で、パソコンでサイトを見る人よりもスマホで見る人が増えているんです。
それに対して、ちゃんとレスポンシブ化してるサイトってまだ少ない。
2年以上前に作られたサイトのほとんどがレスポンシブ化されてないままだったりします。
これって、かなりのアクセスを逃してることになるんですよね。
パッと開いてレスポンシブ化されていないと、見にくいし、めんどくさくて閉じちゃうんですよね。
なので今、webデザイナーはサイトのレスポンシブ化ができないと仕事がありません。
ワードプレスを使えば、だいたいどのテーマもレスポンシブ化されてるので、あまり手間もかからないんですが、やはりカスタマイズするときにその仕組みは知っておかないと、崩れた時にどうすることもできませんし、クライアントの細かい要望に応えることができません。
グローバルメニューをスマホ対応に
レスポンシブ化のときにまず悩むのがグローバルメニューです。
ワードプレスの場合、phpでメニューを呼び出してるので、カスタマイズするときに戸惑うかもしれません。
基本的な考え方は、ＰＣのときとスマホのときでスマホ用のタグを表示したり非表示にしたりすればいいってこと。
やりかたはいろいろあります。
- javascriptを読み込んでトグルにする
- jQueryを読み込んでトグルにする
- phpでスマホ・PCそれぞれのタグを切り替える
jqueryとjavascriptを読み込む方法は、header.phpでメニュー実装のタグを書き、jqueryやjavascriptを読み込み、jqueryやjavascriptのコードを書きます。
ワードプレスの場合、グローバルメニューを作ると、グローバルメニューのタグがcssにできるので、それをブラウザサイズが◯◯以下になったら、こっちのcssを読み込むという指示をします。
このサイトがとても詳しく説明してくれてるので、
参考にしてみてください。
phpで切り替える
私はphpでスマホ・PCそれぞれのタグを切り替えるという方法を説明しましょう。
header.phpでwp_is_mobile();を使ってスマホの時とPCのときの表示を切り替えます。
<?php if ( wp_is_mobile() ) {
スマホのときの実装コード
} ?>
<?php if ( !wp_is_mobile() ) {
スマホ以外で表示させる実装コード
} ?>
まとめたいときはこちらでもいいかも
<?php if ( wp_is_mobile() ) {
スマホのときの実装コード
} else {
スマホ以外で表示させる実装コード
} ?>
あとは、cssでそれぞれのデザインをします。
ワードプレスの場合、もともとレスポンシブ対応のテーマがほとんどなので、必要ないかもしれませんが、グローバルメニューをいじるとレスポンシブがくずれがちです。
そんなときは前回の私のようにcssで応急処置を取ってもいいんですが、phpを使ったやり方だとスマホはスマホのデザインが自由にできるというかしやすいので、この際、よりおしゃれに作ってしまってもいいと思います。
// ]]>