初心者必見!WordPressで0からブログを作ってみよう!レスポンシブでスマートフォンにも対応させよう編

WordPressのサイトをスマートフォンに対応させよう

今回でWordPressで0からブログを作ってみようもラスト2回になりました。制作編としては最後です。レスポンシブデザインという技術を使ってスマートフォンにも対応したブログにしてみましょう〜

Ads

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordPressテーマ作成編から進めていただくといいかもしれません。

1. HTMLの入門編
2. CSSの入門編
3. WordPressテーマ作成編
4. カテゴリメニュー・パンくずリスト・ページャー作成編
5. 検索できるようにしよう編
6. WordPressで問い合わせページを作ろう編
7. レスポンシブでスマートフォンにも対応させよう編 ←いまここ
8. 作ったブログをサーバーにアップしてみよう編

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、WordPressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

今回の作業するにあたって必要なデータ

完成例としては以下のようなイメージです。

完成例

基本的に横並びになっていものが縦並びになっています、さらに、画面幅に合わせてコンテンツが広がっていますね。

レスポンシブデザインとは

画面サイズに合わせて、自動的にページのデザインを最適化する技術です。

いままでは、PC用のHTMLとCSSやJSなど、とスマホ用のHTMLCSSとJSなどをあらかじめ作っておいて、サーバーサイドプログラム(PHPとかJavaとか)で表示するHTMLを切り替えていました。もちろん今でもそうゆうサイトはありますし、サービスによってはその方がいい場合もあります。

レスポンシブデザインはというと一つのHTMLを作っておいてスマホとPCの切り分けはCSSで行うよっていうものです。
これだったら作るサイトは一つだけですよね。これなら管理が一つだけなのでやりやすいですね

レスポンシブデザインのメリット

HTMLソースが一つで済むから管理が楽になる

従来のやり方では、PCも変更してスマホの方も変更してというように作業が単純に倍かかりました。
これが単純に一つだけで済むので、管理が楽になりますね。

将来的に現れるであろう様々な端末にも対応しやすい

いまではいろんなデバイスが出てきますよね。サーバーサイドでの切り分けでは手間が必要な場合もレスポンシブであれば画面の大きさによって切り替えるので変更が容易です。

シェアがしやすい

PC用のページとモバイル用のページが同じURLのため、ユーザーにとってはシェアやリンクが容易になり、Googleのアルゴリズムにコンテンツが適切にインデックスされます。

シェアがしやすい

複雑なデザインは厳しい

基本的に、多少レイアウトを変更したり、表示非表示を切り替えたりが簡単にできますが、PCサイトとスマホサイトでまったく違うデザインというのは厳しいです。

IE8以下のブラウザでは対応していない

古いブラウザ(IE8以下)では対応していないので、サイトのターゲットユーザーによってはレスポンシブを使わない方がよさそうです。

IE8以下のブラウザでは対応していない

先ほど管理が楽と書きましたが、基本的にレスポンシブの知識があってのっていうのが前提ですね。さらに、CSSの中身が多少複雑なのでその辺をうまく設計できるといいかもしれません。

環境によっては表示が遅くなるかも

基本的にPCサイトと同じHTMLを表示するのでユーザーの環境によっては表示するまでに時間がかかってしまうかもしれません。

CSS3 Media Queriesについて

Media Queriesを使うことで、デバイスの幅に応じたスタイルの割り振りができるようになります。例えば、PCの画面の幅とスマホの画面の幅ってぜーんぜん違いますよね。その幅に応じてCSSを切り替えることができるっていう技術なんです。

レスポンシブなサイトを作る上で必須のスキルといえます。

@media screen and (max-width:768px){
	ここにCSSを書く
}

上記の場合だと最大で768pxの幅までのスタイルを{}内に記述する形になります。この幅を記述するさいに知っておかなければいけねい知識がブレークポイントです。

ブレークポイントとは

CSSが切り替わる画面幅をブレークポイントと呼びます。ようはどの幅でスタイルを切り替えるかのポイントになる部分なんですが、基本的に「絶対にこうするといい」っていうのは無いようですね。

よく使われる画面サイズ

スマホ縦 320px〜479px
スマホ横 480px〜767px
タブレット 768px〜1023px
PC 1024px〜

タブレット部分より小さい場合にはスマホサイトを見せたいと言った場合には、768pxを基準にするとよさそうですね。多くの制作者もここをブレークポイントにしていることが多いようです。

ただ、レイアウトによってはこのブレークポイントではレイアウトが崩れてしまう場合もあります。イチマルニデザインのブログも実はそうなんです・・・。

768pxをブレークポイントにしているのですが、PCで幅の小さい画面の場合サイドコンテンツが広すぎてメインコンテンツが見にくいんですよね。ただ、アクセス解析するとあまり小さい画面おPCで見ている人が多くない、タブレットで見ている人がほとんどいないので対応は今の所しません。

サイトのレイアウトやユーザーのアクセスなどの情報で切り替えるポイントを考慮する必要がありそうですね。ただ、CSSのみでその切り替えができるのですぐに対応できるのもいいとこかもしれません。

2/4 レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About

ブラウザでの確認方法と実機での確認方法

基本的なレスポンシブデザインのサイトを制作するさいのブラウザ確認方法として3つあります。

PCのブラウザの幅をドラッグで大きくしたり小さくしたりする

これは単純にブラウザの画面の幅を動かして確認します。これが一番簡単で基本的にこの方法で確認をします。

Chromeなどのデベロッパーツールで確認

デベロッパーツールなどでiPhoneやAndroidの画面幅を擬似的に作り出して確認します。これも比較的確認するのに手間がないのでオススメ!

簡単!PCでスマホサイトを見る方法|主要ブラウザ別

実機で確認

これは最終的に確認に使うといいとおもいます。どうあっても上記二つは擬似的なものなので、実機が一番信頼性がありますよね。iPhoneやAndroidなどいろんな実機で確認をしてレイアウト崩れがないか確認します。

スマホサイトを作りながらiPhoneで確認する方法 | WEBdev

上記を参考にするとわかりやすいとおもいます。

ちなみに、IPアドレスを調べる場合としてWindowsの場合は

ipconfig

Macは

ifconfig

でできます。さらに今回は、WordPressでブログを作っていますね。その場合WordPressの管理画面でもちょっと設定を変えなければいけません。

管理画面左メニュー > 設定 > 一般

WordPress アドレス (URL)とサイトアドレス (URL)の部分を変更します。

localhostとなっているところを調べたIPアドレスにしてくださいね。これでiPhoneやAndroidでも確認ができるはずです。

レスポンシブデザイン用のスタイルを書こう

header.php

<meta name="viewport" content="width=device-width, initial-scale=1">

これはViewportといって表示領域を指定するものです。
スマートフォンに対応させたい場合必須の記述です。titleのすぐ上に記述してください。

合わせてこちらもどうぞ

Media Queriesの書き方の統一

基本的に書き方のルールとして2通りあるとおもいます。

Media Queriesをまとめて一箇所に書く方法

いろんなスタイルをスマホに合わせてスタイルを変更するために、CSSをそれぞれの箇所で書かなければいけません。それらをまとめて一箇所に書く方法です。

例にすると

body{
	PCスタイル
}
.hoge{
	PCスタイル
}
.fuga{
	PCスタイル
}

@media screen and (max-width:768px){
	body{
		SPスタイル
	}
	.hoge{
		SPスタイル
	}
	.fuga{
		SPスタイル
	}
}

この場合だと、ひとまとまりで書けるので記述は少なくてすみますね。ただ、PCの場合スマホの場合がコンテンツごとにはなれず着ているので、ぱっと見わかりにくいかもしれませんね。

コンテンツごとに都度書く方法

これは、ようはMedia Queriesの記述をたくさん書くことになりますね。実際のコードだと

body{
	PCスタイル
}
@media screen and (max-width:768px){
	body{
		SPスタイル
	}
}

.hoge{
	PCスタイル
}
@media screen and (max-width:768px){
	.hoge{
		SPスタイル
	}
}

.fuga{
	PCスタイル
}
@media screen and (max-width:768px){
	.fuga{
		SPスタイル
	}
}

というように、都度書いていくルールです。もちろん切り替えが必要なスタイルだけの対応でいいんですが、要素ごとに切り替えのスタイルがわかりやすいですね。ただし、それに伴い、コード量は多くなります。

どちらの方法でもいいと思うんですが、今回は「コンテンツごとに都度書く方法」でコードを書いていきます。

style.css body部分

これは、bodyのスタイルに追記してください。こうすることで、スマートフォンを縦や横にしても文字のサイズが変わりません。

-webkit-text-size-adjust: 100%;

style.css header部分

PCでは幅を指定していましたが、スマホサイトでは画面の幅に合わせてコンテンツを広げます。

width: 100%;

あとは、ロゴとnavが横並びになっているので

float: none;

で横並びを解除します。その他、レイアウトを調整します。

今回は、ヘッダー関連のスタイルをまとめてMedia Queriesを書きます。
「.header__nav__list a:hover」の直下に記述します。

/*---------------------------------------------------

ヘッダー

---------------------------------------------------*/
.header{
  PCスタイル
}
・・・
.header__nav__list a:hover{
	PCスタイル
}

@media screen and (max-width:768px){
  .header__inner{
    width: 100%;
    margin:20px 0 0;
  }

  .header__logo{
    float:none;
    margin:0 auto;
  }

  .header__nav{
    width: auto;
    float:none;
  }

  .header__nav__menu{
    width: 100%;
    text-align: center;
  }

  .header__nav__list{
    width: 32%;
  }

  .header__nav__list a{
    width: 100%;
    padding:0;
  }
}

style.css パンくずリスト

これはスマホでは表示しないようにします。

/*---------------------------------------------------

パンくずリスト

---------------------------------------------------*/
.breadcrumb{
  PCスタイル
}
@media screen and (max-width:768px){
  .breadcrumb{
    display: none;
  }
}

style.css wrapper

/*---------------------------------------------------

ラッパー

---------------------------------------------------*/
.wrapper{
	PCスタイル
}

@media screen and (max-width:768px){
  .wrapper{
    width: 100%;
  }
}

style.css main-content

画面幅は90%にしています。コンテンツの両脇に余白がでるようにしたいためです。あと、横並びの解除もしていますね。

/*---------------------------------------------------

メインコンテンツ

---------------------------------------------------*/
.main-content{
	PCスタイル
}
@media screen and (max-width:768px){
  .main-content{
    width: 90%;
    float: none;
    margin: 0 auto 60px;
  }
}

style.css side-content

/*---------------------------------------------------

サイドコンテンツ

---------------------------------------------------*/
.side-content{
  PCスタイル
}
@media screen and (max-width:768px){
  .side-content{
    width: 90%;
    float:none;
    margin: 0 auto;
  }
}

style.css pannel-gloup

これは横幅100%なのは、画面いっぱいに広げるためではなくて「pannel-gloup」の親要素である「main-content」の幅に合わせるためです。

「.pannel-group__item__date」の直下に記述してください。

/* pannel
--------------------------------------------------------- */
.pannel-group{
  PCスタイル
}
・・・
.pannel-group__item__date{
	PCスタイル
}
@media screen and (max-width:768px){
  .pannel-group{
    width: 100%;
    margin:0 auto;
  }
  .pannel-group__item{
    margin:0 0 40px;
    width:100%;
    height:auto;
    float:none;
  }
  .pannel-group__item__img{
    width: 100%;
    height:auto;
  }

  .pannel-group__item__img img{
      width: 100%;
      height: auto;  
    }
}

これで、完成例と同じように表示されていることとおもいます。コンテンツごとに都度ブラウザで確認をして、最終的に実機で確認するようにして作業を進めてくださいね。

完成例

おわりに

これでレスポンシブデザインの基本をご紹介しました。当初もっと短い記事になるのかな〜と持ったんですが、意外に結構ボリュームがある記事になったのでびっくりしてます。

ひととおりゼロからWordPressのサイトを作るっていうのはほぼ終わりました〜

いや〜、やってみると結構大変でした・・・。

次は、一旦ラストってことで、サーバにアップして公開してみようっていうのをやってみます。ただ、予算の都合上この記事用にサーバをレンタルできないし、どうしよう。

今回の完成例

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ