LovelogLovelogMenuMenuAboutSitemapContactCategoryWordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。LinkPCサイトとスマートフォンサイトで必要となってくるカスタマイズの説明です。これは、どのテーマ作成にも関わってきます。LinkPC専用のウィジェットとスマートフォン専用のウィジェットを設置するPCサイトでは閲覧範囲が広いので、2カラム3カラムレイアウトでサイドバーにウィジェットを設置する事が多いのですが、スマートフォンサイトでは基本1カラムレイアウトなので、サイドバーが必要なくなります。PCサイトより限られた情報を表示することになりますので、コンテンツ内容の整理が必要となります。記事コンテンツ直下にウィジェットを入れたい場合などに役立ちます。いう時、PCサイトとは別に、スマートフォンサイト専用のウィジェットを用意して出し分けをすると便利です。ウィジェットを追加する方法function.phpに以下のソースを追加します。Content&amp;before_title=<h1>&amp;after_title=</h1>&amp;before_widget=&amp;after_widget=');挿入したい場所に、下記のソースを追加します。?>これで、WordPressの管理画面の外観>ウィジェットをクリックすると、ウィジェットを設置することが可能となります。Adsenceでは、PCサイトと高機能デバイスと種類があるので、ウィジェットで出し分けするのも良いと思います。基本的に、コンテンツ幅(width)をpx指定しないことです。width:100%;かwidth:auto;を使用する、リキッドレイアウトが基本です。幅指定してしまうと、デバイスの解像度毎に指定しなければならなくなるので、かえってCSSが複雑になってしまうからです。デザインもスマートフォン向けのデザインにするとかなり楽になります。文章のpタグをmarginかpaddingで調整している場合です。この場合、背景画像はデバイスの解像度によって自動的に調整されます。pタグをpx指定で調整してしまうと、当然ズレが生じます。これを避けるために、CSSでの背景画像の配置を避けるか、または、デバイス毎にメディアクエリーを使用して調整するかのどちらかになります。メディアクエリーを使用して調整する場合は、pxではなく%指定にします。%指定にして、ある程度妥協しなくてはいけないと思います。確認できれば良いとは思いますが、それもちょっと難しいと思いますので...。個人的には、CSSでの背景画像の配置を避けたほうが無難だと思います。絶対配置もまたズレが生じるので、なるべくなら避けるか、デバイス別に設定するかのどちらかになるでしょう。レスポンシブに対応するにあたってレスポンシブWEBデザインをテーマに導入するにあたっての設定事項と、レスポンシブWEBデザインの説明を簡単にしました。詳しい説明は、Googleで検索してみてください。【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】はシリーズ化しています。この記事はシリーズ化しています。概要編と基本編は読んでくださいね。はじめから、ていねいに。コメントデータの処理方法の詳細はこちらをご覧ください。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。