PCサイトとスマートフォンサイトで必要となってくるカスタマイズの説明です。
これは、どのテーマ作成にも関わってきます。
PC専用のウィジェットとスマートフォン専用のウィジェットを設置する
PCサイトでは閲覧範囲が広いので、
２カラム３カラムレイアウトでサイドバーにウィジェットを設置する事が多いのですが、
スマートフォンサイトでは基本１カラムレイアウトなので、
サイドバーが必要なくなります。
また、PCサイトより限られた情報を表示することになりますので、
コンテンツ内容の整理が必要となります。
例えば、サイドバーはスマートフォンサイトでは必要無い代わりに、
記事コンテンツの下にウィジェットを入れたい場合や、
記事コンテンツ直下にウィジェットを入れたい場合などに役立ちます。
そういう時、PCサイトとは別に、
スマートフォンサイト専用のウィジェットを用意して出し分けをすると便利です。
ウィジェットを追加する方法
function.phpに以下のソースを追加します。
[php]register_sidebar(‘name=Smartphone&before_title=&after_title=
&before_widget=&after_widget=’);
register_sidebar(‘name=Smartphone Content&before_title=
&after_title=
&before_widget=&after_widget=’);[/php]
挿入したい場所に、下記のソースを追加します。
[php][/php]
これで、WordPressの管理画面の外観＞ウィジェットをクリックすると、
ウィジェットを設置することが可能となります。
Google AdSenseの広告をPCとスマートフォン向けの出し分けをする方法
Google Adsenceでは、PCサイトと高機能デバイスと種類があるので、
ウィジェットで出し分けするのも良いと思います。
レスポンシブを実装するのが楽になる方法
基本的に、コンテンツ幅（width）をpx指定しないことです。
[php]width:100%;[/php]か
[php]width:auto;[/php]を使用する、リキッドレイアウトが基本です。
なぜなら幅指定してしまうと、
デバイスの解像度毎に指定しなければならなくなるので、
かえってCSSが複雑になってしまうからです。
デザインもスマートフォン向けのデザインにするとかなり楽になります。
レスポンシブに対応する方法
head間にviewportを挿入する
[php][/php]デバイス別に調整する
[php]@media (max-width: 800px) {}
@media (max-width: 650px) {
}
@media (max-width: 450px) {
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}[/php]
CSSの背景画像は幅100%指定にする
[php] background-size:100% auto;[/php]画像幅は100%指定にする
[php]img{max-width: 100%;
height: auto;
width /***/:auto;
}[/php]
注意すること
CSS内で背景画像を利用して、paddingやmarginで文章位置を調整している場合
例えば、下記の図のように、コンテンツに背景画像を配置し、
文章のpタグをmarginかpaddingで調整している場合です。
この場合、背景画像はデバイスの解像度によって自動的に調整されます。
そして、pタグをpx指定で調整してしまうと、当然ズレが生じます。
これを避けるために、
CSSでの背景画像の配置を避けるか、
または、デバイス毎にメディアクエリーを使用して調整するかのどちらかになります。
メディアクエリーを使用して調整する場合は、pxではなく%指定にします。
%指定にして、ある程度妥協しなくてはいけないと思います。
というのも、個人が全てのデバイスを持っていて、
確認できれば良いとは思いますが、
それもちょっと難しいと思いますので…。
個人的には、CSSでの背景画像の配置を避けたほうが無難だと思います。
positionを使用した絶対配置
絶対配置もまたズレが生じるので、なるべくなら避けるか、
デバイス別に設定するかのどちらかになるでしょう。
レスポンシブに対応するにあたって
レスポンシブWEBデザインをテーマに導入するにあたっての設定事項と、
レスポンシブWEBデザインの説明を簡単にしました。
詳しい説明は、Googleで検索してみてください。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】はシリーズ化しています。
この記事はシリーズ化しています。
概要編と基本編は読んでくださいね。
コメント