ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

thum_respontive

20147/8

スマホ対応のWEBサイトをつくる(CSS対応)

CSSを追加するだけでかんたんレスポンシブ対応

スマホが主流になっているいま、レスポンシブ対応はほぼ必須になっています。

レスポンシブ対応って難しいんじゃないの?とおもうかもしれませんが、コツを掴んでしまえばかんたんにできます。
この際に覚えてしまって、スマホからの閲覧者にやさしいサイト作りをしましょう!

レスポンシブ対応の方法

基本的に私はこの方法を使います。

respontive

かんたんに言ってしまうと、スマホ用のCSSを1つ用意して、
画面サイズが小さい場合(スマホ)はそちらのCSSを優先して読み込ませるという方法です。

レスポンシブサイトのCSSをつくるときのコツは

  • widthは100%またはautoにするべし!
  • スマホ用CSSは消さずに上書きを心がける!

この3つです。
早速やっていきます。

スマホ用のCSSは消すのではなく上書き

まず覚えておくのが、CSSの読み込みはPC用CSS+スマホ用CSSということ。
どういうことかというと、スマホ用CSSで「これいらない!」といって消してしまっても
PC用のCSSのほうで生きたままになっているということです。

なので「この要素は不要だな」と思っても、消すのではなく打ち消しの要素を入力してあげましょう。

respontive2

widthは100%またはauto変更

bodyや各div要素に「width: ◯◯◯px;」と指定していると思いますが、
この要素はすべてautoや100%に変更してあげます。

「width: ◯◯◯px;」としている数値が画面サイズより大きい物(例えば1000pxとか)だと
スマホの画面横サイズより大きくなってしまうためです。

ここで気をつけるのは、「img」も原則「width: 100%」にすること。
そして同時に「height: auto;」も指定すること。
「width: 100%;」のみの指定だと横に伸びた画像表示になってしまうからです。

グローバルナビは%で指定する

スマホで見た時に特にタップしにくいのがグローバルナビ。
メニューが多いほど1つのボタンが小さくなり、タップしづらくなります。

レスポンシブでは全体幅を100%と考えて
「100%(全体幅)÷6(メニューの個数)=16.666666…%」と計算します。
つまりグローバルナビの1つあたりの幅は16%となり、「width: 16%;」とします。

respontive3

※条件によって数値が変わってくるのでおおよその目安・考え方としてください。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

a

201710/24

プラグインを使わない絞り込み機能【未選択時はすべて表示したい】

Wordpressの検索機能について チェックボックスに1つもチェックをいれなかったら 絞り込まずに全部表示。 「絞り込みの入…

av

Welcartのカテゴリー管理・新規登録ページをカスタマイズする

ECサイトをWordpressで運用するときに使われる『Welcart』というプラグイン。 私はこのプラグインが使いにくくて仕方がないです…

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

ページ上部へ戻る