Wordpress

スマホで表示が切り替わるCSSをWordPressで記述する方法

  1. HOME >
  2. Wordpress >

スマホで表示が切り替わるCSSをWordPressで記述する方法

レスポンシブ対応したCSSを記述する方法

レスポンシブ対応したCSSを記述する方法

・今主流のスマホに対応した、表示が切り替わるWebページにしたい。

・WordPressで表示が切り替わるスタイルをどこに書けばいいのかわからない。

・WordPressのCSS追加方法でレイアウトの変更はできるけど、レスポンシブ対応できる書き方がわからない。

今回は、以上の悩みを解決できる記事を作成しました。

ココがポイント

結論:

CSSを追加するだけで、画面の表示レイアウトが切り替わるレスポンシブ対応したWebページが作成可能です。

次のStepで問題を解決します。

  1. スタイルを変更する入れ物のid属性値class属性値タグ名を確認する。
  2. ご紹介するCSSを追加。
  3. CSSの一番先頭(セレクタ)を変更
  4. { }(中括弧)内に、スタイルを書く。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様はよく、WordPressで記事を書いていると、
スマホで見るときは、違うスタイルにしたい。
このように思うときがありませんか?

なんと、WordPressにあるデフォルトの設定だけで
スマホとPCでレイアウトを変更することができます。

使用したいスタイルについて知りたいときは、
Google検索で「CSS リファレンス」と検索。
もしくは、「CSSリファレンス用冊子」から確認などがあります。

HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE)
私も利用している便利なリファレンス用冊子になります。
逆引きから目的のコードを見つけやすい。
使用例もあるので、CSSのルールがわからなくてもCSSを書ける。
おすすめの一冊なので、是非手元に置いてみてはいかがでしょうか?

 

1.セレクタにいれる、id属性値とclass属性値、タグ名を確認

セレクタに入れる値を探す

セレクタに入れる値を探す

 

2.CSSコードをコピペ

CSSコードをコピペ

CSSコードをコピペ

/* レスポンシブ設定 ↑PC ↓タブレット */
@media screen and (max-width: 768px){
  .sample {
    /* タブレット専用スタイルを入れる */
  }
}

/* レスポンシブ設定 ↑PC、タブレット ↓スマホ */
@media screen and (max-width: 480px){
  .sample {
    /* スマホ専用スタイルを入れる */
  }
}

以上をコピーして、追加CSSにペーストします。
追加するのは、記述してあるCSSの一番下になります。(最重要)

ココがポイント

CSSスタイルの決まりとして、コードの一番上から順にスタイル読み込んでいきます

このとき、Web上で同じ場所を指定するセレクタに、同じプロパティで違う値のCSSを書てしまったとします。

例えば、最初にfont-sizeを1px、次にfont-sizeを2pxにしたとします。

そうすると、Webブラウザでは後から読み込んだCSSスタイルが優先されスタイルの上書きが起こります。今回はフォントサイズが2pxになります。

そのような理由から、レスポンシブ対応したCSSを追加するポイントは、
下のCSSに、表示が切り替わるスタイルを書き、前のスタイルを上書きしていくというイメージをもっておいてください。

 

3.スタイル最初のセレクタ(.sample)を変える

セレクタを変える

セレクタを変える

タブレットの場合は、「/* レスポンシブ設定 ↑PC ↓タブレット */」の下の「.sample」に。

スマホの場合は、「/* レスポンシブ設定 ↑PC、タブレット ↓スマホ */」の下の「.sample」に。

それぞれ、目次「1.セレクタにいれる、id属性値とclass属性値、タグ名を確認」で確認した値を入れていきます。

書き方は、下表の「セレクタに入力するCSSコードの例」を参考にしてください。

属性 コンソール画面の表示例 セレクタに入力するCSSコードの例
id属性 id="smartphone" #smartphone
class属性 class="smartphone" .smartphone
それぞれのタグ <a> a

 

4.{ }内にお好みのスタイルを書く

CSSスタイルをお好みにカスタマイズ

CSSスタイルをお好みにカスタマイズ

コピペしたコードの中にある

タブレットなら、「/* タブレット専用スタイルを入れる */」
スマホなら、「/* スマホ専用スタイルを入れる */」

が書いてある行にオリジナルスタイルを書いていきます。
「指定したいスタイル(プロパティ)+『:(半角コロン)』+値(2pxやblock等)+『;(半角セミコロン)』」

書いたスタイルは最後「;(半角セミコロン)」で終わります。
この「;」の後ろで改行すると、コードが読みやすくなります。

好みのCSSスタイルをみつけるには、「CSS リファレンス」でGoogle検索してみてください。

www.htmq.com
参考にしました
 
404 Not Found
https://www.htmq.com/style/

上記のWebサイトが探しやすいでしょう。

 

Google検索で探しても、目的のコードが見つからないときは、


上記の冊子はいかがでしょうか?
逆引きも見やすくできているので、目的のコードが見つけやすい。
また、CSSの書き方も記載例がのっているので、実際にCSSを書くところまでつまずくことなくいけます。
食事にかかる費用を2日節約すれば、買える一冊なので、
是非、手元にどうぞ!

 

まとめ

お疲れ様でした。

今回は、レスポンシブ対応したCSSスタイルを適用できるまで、をご紹介させていただきました。

ココがポイント

問題解決のステップ

  1. id属性値class属性値タグ名を確認(大変な作業ですが、ポイントさえ押さえればたどり着きやすくなります)
  2. ご紹介したCSSをCSSコードの一番下に追加
  3. セレクタに、それぞれの属性値を書き、スタイル適用箇所を指定
  4. {}内に、お好みのスタイルを書く

以上になります。

皆様も自分オリジナルのCSSスタイルを記述して、
目的に合ったWebデザインにしてみてはいかがでしょうか?

ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.