2014/01/10
WordPressレスポンシブテーマ作成で参考にした8サイト＋α
絶大な支持を得ているWordPress無料テーマ「Stinger」からオリジナルテーマへと移行し、現在細かな修正を行っています。
レスポンシブデザインのテーマを作成するにあたって、多くのサイトを参考にしました。素人ながらはじめてのテーマ作成となりましたので、備忘録として参考サイトをご紹介します。
Headline
HTML5レスポンシブデザイン骨格
ジェネレーターを活用しようと考えていましたが、ほかに参考サイトを探して見つけたのがこちら。
全5回にわたり、実際に「枝豆隊」というサイトを作成する過程を見ながら基本を学べます。HTML5＋レスポンシブデザインの概要がつかめるので、これから始める方におすすめ。
なお、この企画は書籍化されています。動画像の対応やパフォーマンス改善など、より詳しい情報が盛り込まれています。
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)
全体的なデザインは、Stingerをカスタマイズしてある程度完成したものを引き継ぎました。「枝豆隊」サンプルHTMLをベースに、ブログのソースを切り貼りして骨格が完成。
CSS3を活用したデザイン
骨組みができあがった後、スマホ閲覧時のデザインから始めました。
こちらも「枝豆隊」のサンプルをベースにしています。とくに複雑なデザインではないので、基本的なことをここで調べながら。
レスポンシブデザインに必須なのがMedia Queriesの指定。PCではブラウザの幅が、スマホやタブレットでは画面の幅が基準になり、デザインが変わります。注意点はIE8以下はCSS3に対応していないこと。
Internet Explorer 8 以下への対応
IE8以下のためにJavaScriptを2つ読み込ませるようにして、閲覧には影響がない形にしました。
簡単にできる！IE8をHTML5レスポンシブデザインに対応させる方法
完全対応させるには僕の知識が少なすぎたので、このまま放ってあります。
IE8以下はCSS3のMedia Queriesが認識できないため、モバイルファーストで作成したデザインはスマホ用の表示がそのまま横に拡大されてしまいます。PC閲覧時（ここでは1024px以上）のデザインから指定して、最後にスマホ閲覧時の指定をするとIE8以下でも大丈夫なようです。
Windows XPが完全に姿を消せば何の問題もないのですが…。
レスポンシブデザインでよく使う指定
レスポンシブ化で必須項目なのが、画像やコメント欄の縮小です。スマホ環境で見た時にレイアウトが崩れないよう、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用に書き換えていきます。参考にしたのは、こちらの2つ。
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました
もう、これだけで十分すぎるくらい丁寧な解説です。変換作業自体は30分ほどで終わりました。
「functions.php」はStingerを丸ごとコピーして、不要な部分を削除しました。徐々に書き換えていますが、まだ10％ぐらい残っています。
ちょっと前まで画像を<p>で囲むのが何となくイヤだったので、除去するコードを書いていましたが、大して意味がなさそうなので外しました。余計なモノ入れて遅くなったら意味ないし。
使用したツール一覧
テーマ自作のために必要なのが、テキストエディタとFTPソフト。背景画像やアイコンはフリー素材がたくさんあるので自作しなくてもOK。ダミー画像やダミー文章もたくさんあります。
テキストエディタTeraPad使用上の注意点
今回いろいろ試してみたんですが、最終的に使っていたのはTeraPadでした。プロの方はもっと効率よく作業できるエディタを使っていますが、素人だから必要最低限の機能があればいいかなと。
ひとつ注意しなければならないのが、文字コードと改行コードです。ここでちょっとつまずいた内容を記事にしてあります。
エラーが起きた？それはUTF-8のBOMと改行コードが原因かもしれません
UTF-8（BOMあり）だと、ヘッダ上部に指定した覚えのない余白ができます。ブラウザによって違うようです。
FTPクライアントソフトFFFTP
初心者でもわかりやすいのが、FFFTP。
有名レンタルサーバだとWordPressかんたんインストールができるので、FTPソフトがなくてもWPの運営は可能です。テーマやプラグインの更新も管理画面からできますしね。
テーマだけならローカル環境で完成させて管理画面からサーバへアップすることもできますが、robots.txtや.htaccessを作成したい場合はFTPソフトが必要です。
アップロードだけではなくダウンロードにも使うので、いれておきましょう。
ローカル環境の構築
サーバを契約しているなら空いているところにWPをインストールすればいいのですが、ローカル環境もあったほうが何かと便利です。
簡単で動作も早いのがBitNami。おすすめです。
bitnami：パソコンにWordPressをインストールする手順と使い方
わけのわからんことをして万が一暴走してしまうと他のサーバ利用者に多大な迷惑をかけるので、自作＆カスタマイズ用にWordPressをPCにインストールしておきましょう。
その他細かいオプション
スクロールしたら右下からTOPボタンが出てくる
一定量スクロールすると右下に「TOPへ戻る」ボタンが出てくるようにしています。
Stingerは浮き出てくる感じですが、右下からピョンと出てくる形に変えました。その他、あちこちで見かける上部にバーを固定する方法などはこちらに載っています。
レスポンシブデザインなので、動きをつけすぎるとスマホで見づらくなります。PHPで切替処理するか、不要なものは一切排除したほうが良いでしょう。
今年は「ミニマル」が流行るようです。
プラグインを使わないページネーション
Stingerから流用していますが、プラグインを使わずにページネーション（ページャー）を実装しています。シンプルな方法はこちらからどうぞ。
WordPressにプラグイン無しでページネーションを設置する方法
まとめ
レスポンシブデザイン自作テーマ完成までの流れは、こうなります。
- HTMLで骨組みをつくる
- スマホ→タブレット→PCの順でデザイン
- WordPress用に変換し、ローカル環境で確認＆修正
- ブラウザごとの挙動を確認＆修正
- 完成テーマをサーバにアップして確認＆修正
確認と修正を行いながら徐々に完成していく感じですね。とくに、WordPressテーマへの変換後と本サイトへの適用後は修正点がたくさんありました。スマホやタブレットでどのように表示されるかは、こちらのサイトで確認できます。
まだやりたいことがたくさんありますが、カスタマイズをやり出すとキリがありません。とりあえずここらで一段落。
オリジナルテーマ使ってみたい！という方がいれば公開します。
それでは、また。
