レスポンシブデザインのテーマを作成するにあたって、多くのサイトを参考にしました。備忘録として参考サイトをご紹介します。
Headline
基本を学べるサイト
レスポンシブ Web デザインの基本を学べるサイトがこちら。
「枝豆隊」というサイトを作成する過程を見ながら基本を学べます。HTML5＋レスポンシブデザインの概要がつかめるので、これから始める方におすすめです。
この企画は書籍化されており、動画像の対応やパフォーマンス改善など、より詳しい情報が盛り込まれています。
「枝豆隊」サンプル HTML をベースに、骨格が完成すると思います。
CSS3 を学べるサイト
骨組みができたあとは、スマホ閲覧時のデザインから始めます。
上記の「枝豆隊」のサンプルをベースに、リファレンスで調べながらデザインしていくのがよいと思います。
レスポンシブデザインに必須なのが Media Queries の指定。PC ではブラウザの幅が、スマホやタブレットでは画面の幅が基準になり、デザインが変わります。
もはや対応不要だとは思いますが、IE8 以下は CSS3 に対応していないのでご注意ください。
Internet Explorer 8 以下に対応する
IE8 以下対応には JavaScript を使います。
完全対応させるには難しいかもしれませんが、それなりの表示になるので問題ないでしょう。
モバイルファーストではなく PC ファーストで設計すると、IE8 以下でもさほど崩れることなく表示できます。
YouTube 動画の埋め込みに対応する
レスポンシブ化で必須項目なのが、画像やコメント欄の縮小です。スマホ環境で見た時にレイアウトが崩れないよう、width を指定しておきます。
textarea {
width: 100%;
}
input {
max-width: 100%;
}
img {
max-width: 100%!important;
height: auto;
}
また、記事内で強調したい部分にボックスを使うこともありますが、スマホ閲覧時に文字がはみ出さないよう overflow: hidden はよく使います。
.gray_box {
width: 85%;
margin: 1em auto;
padding: 5%;
background-color: #efefef;
overflow: hidden;
}
YouTube など動画の埋め込みはプラグインでも対応できますが、div で囲むことにより CSS での対応も可能です。
ワードプレス投稿に埋め込んだYouTube動画を簡単なCSSで、たった2分でレスポンシブ対応！
レスポンシブ対応すると、PC でもスマホでも動画の比率を保ったまま表示できます。
プラグインに頼り過ぎると重くなってしまいますが、容量の大きなものを縮小しているだけだとこれまた重い原因になりますので、いろいろ試してみようと思います。
WordPress テーマ変換を学べるサイト
HTML と CSS がある程度完成したら、WordPress 用に書き換えていきます。
もう、これだけで十分すぎるくらい丁寧な解説です。シンプルな造りであれば、変換作業自体は 1 時間もかからないと思います。
WordPress テーマ作成に使うツール
テーマ自作のために最低限必要なのは、テキストエディタと FTP クライアントソフトです。
背景画像やアイコンはフリー素材がたくさんあるので、それを活用すれば十分だと思います。ダミー画像・ダミー文章もたくさんあります。
テキストエディタ使用上の注意点
テキストエディタを使うさいに注意しなければならないのが、文字コードと改行コードです。
UTF-8（BOMあり）だと、ヘッダ上部に指定した覚えのない余白ができます。
プラグインが正常に動作しない原因にもなりますので、テーマ作成時は気をつけたいですね。
FTP クライアントソフト FFFTP
初心者でも扱いやすい FTP クライアントソフトは、FFFTP です。
有名レンタルサーバだと WordPress かんたんインストールができるので、FTP ソフトがなくても WordPress サイトの立ち上げは可能です。テーマやプラグインの更新も管理画面からできますしね。
テーマだけならローカル環境で完成させて管理画面からサーバへアップすることもできますが、robots.txt や .htaccess を編集したい場合はFTPソフトが必要になってきます。
アップロードだけではなくダウンロードにも使うので、入れておきましょう。
ローカル環境の構築 bitnami
サーバを契約しているなら空いているところに WordPress をインストールすればいいのですが、ローカル環境もあったほうが何かと便利です。
以前は、簡単で動作も速い bitnami をよく使っていました。
自作＆カスタマイズ用に WordPress を PC にインストールしておきましょう。
まとめ
レスポンシブデザイン自作テーマ完成までの流れは、こうなります。
- HTML で骨組みをつくる
- スマホ → タブレット → PC の順でデザイン
- WordPress 用に変換し、ローカル環境で確認＆修正
- ブラウザごとの挙動を確認＆修正
- 完成テーマをサーバにアップして確認＆修正
確認と修正を行いながら徐々に完成していく感じですね。とくに、WordPress テーマへの変換後と本サイトへの適用後は修正点がたくさんあると思います。
一つずつやっていきましょう。
それでは、また。