WordPressテーマLightningのレスポンシブデザイン

このブログでは、ワードプレスに興味がある方、これから勉強してみたい方、勉強を始めたばかりの方に向けて、Lightningというテーマを通してワードプレスについて、ざっくりとお話します。ある程度勉強している方にとっては、物足りない内容になっているかもしれません。ご容赦ください。

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

まずはレスポンシブデザインの説明をします。

レスポンシブデザインとは、
WEBサイトを閲覧する際、
デバイスごとに見やすいレイアウトに
自動で変えていく事の出来るWEBデザインのことを言います。

例えばPCで閲覧しているサイトを、
スマホでそのまま表示しようとするには、
大きなPC画面を強引に小さいスマホ画面に
入れなくてはいけなくなるので、
文字も写真も小さすぎて何が書いてあるのか全く分からなくなります。

それを回避するために、
文字の大きさを大きくするとページの全体像が見れなくなって
非常に読みづらくなってしまいます。
そういう事が起こらないようにするには
どうすれば良いか考えられた結果できたのが
レスポンシブデザインという事です。

レスポンシブデザインでは、
デバイスの画面の大きさに応じて、
レイアウトのプログラムを切り替えることで
どんなデバイスで閲覧しても見やすいページになるようにします。

最近はPCでWEBサイトを閲覧する人より
スマホやタブレットで閲覧する人のほうが
増えてきているのでレスポンシブデザインに対応した
WEBサイトを作ることはとても大切な事になっています。

Lightningは、レスポンシブデザインに対応しているのか？

Lightningは、レスポンシブデザインに対応しているのか？

Lightningはレスポンシブデザインに対応しています。
しかし、正直いって、
レイアウトか崩れることも多々あります。
そういう時は、
それを補うためにＣＳＳを追加して調整します。

Lightningで作ったサイトをスマホでみると、どんな感じになるか？

それでは、
Lightningで作ったサイトを
スマホで見るとどんな感じになるか
実際に見てみましょう！

今回も、
私のポートフォリオを使ってみます。
大体問題ないと思うのですが、
細かい所を見ると見出しのところが
ちょっとおかしいのではないかと思います。
ですのでこの部分をCSSを追加して修正してみます。
（動画を参照してください）
いかがでしょうか？
今回の場合は、
修正しなくてもそれほど違和感を感じなかったかもしれませんが、
修正した後の物を見てみると
やはり修正した方が良いのではないかと思いました。
画面サイズ、フォントの大きさ、文字数などによっては
もっと見た目が崩れる場合があります。
なのでLightningはレスポンシブデザインに対応していますが、
部分的にデザインが崩れるため、
修正が必要になる場合があると思ってい頂いた方が
良いのではないかと思います。

Lightningで作ったスライドショーのレスポンスデザイン

このサイトで一番目立つ場所は、
スライドショーの大きな画像部分です。
Lightningでは、この部分に関しては、
PC用の画像とスマホ用の画像の両方を設定出来るようになっているので
CSSで修正しなくても違和感なく閲覧することが出来ます。
それでは、実際にどのように見えるか、
またどうやって設定するのか見ていきましょう！

まとめ

いかがでしょうか？
今回は、
『WordPressテーマLightningのレスポンシブデザイン』
というタイトルでお話しましたが
参考になりましたでしょうか？
Lightningはレスポンシブデザインにも対応しているので
スマホで閲覧しても問題ないとおもうのですが、
シビアな目で見ると修正したくなる場所が
出てくる事があります。
しかし、スライドショーに関しては、
設定する段階でPC用とスマホ用に
別れているのでCSSによる修正を行わなくても
良くなります。