WordPressでレスポンシブデザインを作成するときに役立つコンテンツ12選
  • /
  • WordPressでレスポンシブデザインを作成するときに役立つコンテンツ12選
  • 記事公開:2018/03/26
  • 最終更新:2019/05/04

WordPressでレスポンシブデザインを作成するときに役立つコンテンツ12選

WordPressでレスポンシブデザインを作成するときに役立つコンテンツを12個まとめてみました。レスポンシブデザインでサイトを構築する方は、一通り確認する事をお勧めいたします。参考にしてください。

この記事は約 4 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

レスポンシブデザインの構築で役立つコンテンツをまとめました。

レスポンシブデザインを構築する時、大抵の場合で必要となるテクニックがいくつかあります。
ここでは、そんなテクニックをご紹介しているコンテンツをまとめてみました。

テクニックは随時更新していきます。

デバイスの横幅で画像を切り替える

PCとスマホで画像を切り替えたい場合は、このコンテンツが参考になります。

2017-07-22
【レスポンシブ】デバイスの横幅で画像を切り替える方法
サイトにアクセスしたデバイスの横幅で画像を切り替える方法をご紹介します。レスポンシブサイトで、PCとスマホで違う画像を表示させたい場合などに使えます。5分程度で実装できますので、興味のある方は参考にしてください。

親要素に収まるように画像を拡大縮小させる

親要素から画像がはみ出さないように拡大縮小させたい場合、このコンテンツが参考になります。
CSSを4行追加するだけの最も簡単な方法です。

2018-05-16
知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法
デバイスの横幅に合わせて画像を拡大縮小させる方法をご紹介しています。CSSのみで対応する方法ですので、面倒なjsの設置やimgタグを書き換える必要もありません。参考にしてください。

スマホ表示で要素がはみ出してしまう

スマホで要素が画面に収まらず横スクロールが出てしまい場合は、このコンテンツが参考になります。

2017-07-21
レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策のまとめ
レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策をまとめてみました。レスポンシブサイトの制作時には頭を悩ませる問題かと思います。現に悩まれている方、このコンテンツで頭痛の種を取り除いてください。

複雑なテーブルを横スクロールで対応させる

複雑なテーブルをどう扱おうかと悩んでいる場合、このコンテンツが参考になります。
テーブルを横スクロールさせる、最も簡単な方法です。

2018-05-17
レスポンシブデザインでテーブルを横スクロールさせる方法
スマホ表示でテーブルを最適化するとき、扱いづらいテーブルが出てくるかと思います。そんなテーブルを横スクロールさせることで、簡単に最適化する方法をご紹介しています。横スクロールできることを伝えるテクニック付きです。

背景画像をデバイスの横幅に合わせて縮小する

背景画像の全体が表示されるようにしたい場合、このコンテンツが参考になります。

2016-09-18
背景画像をレスポンシブに対応させる方法
背景画像をレスポンシブに対応させる方法をご紹介します。paddingを指定して横幅と縦幅の比率を保持したまま、背景画像を縮小拡大する方法です。3分間です。3分間で背景画像をレスポンシブに対応させる方法をマスターできます。

YOUTUBE動画をデバイスの横幅に合わせて縮小する

YOUTUBE動画をデバイスの横幅に合わせて縮小したい場合、このコンテンツが参考になります。

2016-09-10
WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法
サイト内に埋め込んだYOUTUBE動画をレスポンシブに対応させる方法をご紹介します。スマホでサイトを観覧した時でも、もうYOUTUBE動画が画面からはみ出すことはありません。このカスタマイズは3分間でマスターできます!

電話番号リンクをPCで無効にする

電話番号リンクをスマホで有効、PCで無効にしたい場合、このコンテンツが参考になります。

2016-07-20
レスポンシブ対策!電話番号リンク(tel:)をスマホのみ有効にする3つの方法
電話番号リンクをPC表示の場合は無効にする方法をご紹介します。レスポンシブサイトで電話番号サイトを設置すると、PC表示の場合もリンクが生きており上手くありません。この辺りをサクッと解決する方法をご紹介しています。

GOOGLEマップをデバイスの横幅に合わせて縮小する

GOOGLEマップをデバイスの横幅に合わせて縮小したい場合、このコンテンツが参考になります。
ピンの位置も中央からずれません。

2016-02-15
GOOGLEマップをレスポンシブに対応させる方法
GOOGLEマップをレスポンシブに対応させる方法をご紹介します。GOOGLEマップは埋め込みコードを設置しただけはレスポンシブに対応していません。この記事を読めば3分でGOOGLEマップをレスポンシブに対応させることができます。

PCとスマホで表示する要素を切り替える

PCとスマホで表示する要素の内容を切り替えたい場合、このコンテンツが参考になります。

2018-03-08
【WordPress】PCとスマホで表示する要素を自在に切り替える条件分岐
PCとスマホで表示する要素を自在に操る条件分岐をご紹介します。 レスポンシブデザインのサイトを作る時、知っておくと便利なコードです。 5分で理解できる内容ですので、この機会にマスターしてはいかがでしょうか?

デバイスの向きで文字サイズを切り替えない

デバイスの向きでテキストサイズを切り替えたくない場合、このコンテンツが参考になります。

2016-02-15
スマホを横向きにした時、WEBサイトの文字サイズを勝手に変更させない方法
スマホの縦向きと横向きでWEBサイトの文字サイズを勝手に変更させない方法をご紹介しました。文字サイズを変えたくないという方もいると思います。1回のコピペで実装できますので試してみてください。

スマホ表示の時だけ<br>タグを無効にする

スマホ表示の時、<br>タグがあると文章が読みにくくなる場合があります。
そんな問題を解決したい時、このコンテンツが参考になります。

2016-02-14
CSSだけでHTMLのbrタグを無効にする方法
CSSだけでHTMLのbrタグを無効にする方法をご紹介します。レスポンシブサイトなど、スマホ表示の場合のみbrタグを削除したい場合など重宝します。1分で理解できる無いようですので、サクッと身につけてしまいましょう。

フォームを入力する時、画面の拡大を防ぐ

iPhoneでフォームを入力しようとすると、フォーム部分が拡大される場合があります。
この拡大をさせたくないとき、このコンテンツが参考になります。

2016-02-09
【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法
iPhoneでWEBサイトの検索フォームを利用する場合など、自動的に画面が拡大されてしまいます。この機能、便利に感じる場合もありますが、ちょっと【うっとおしい】とかんじる場合もあります。今回は、この画面拡大を回避する方法のご紹介です。

まとめ

WordPressでレスポンシブデザインを作成するときに役立つコンテンツをまとめてみました。

このコンテンツは随時更新しています。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2015/11/09

    バナー広告をPHPでランダムに表示する方法

    バナー広告をPHPでランダムに表示させる方法を解説しています。サイドバーなどの広告をランダムに切り替えてみたい方は参考にしてください。3分後にはバナー広告をランダムに切り替えることができるにようになっています。 記事を読む

  • 2019/05/05

    WordPressのメンテナンスモードが解除されない場合の対処法

    Wordpressでプラグインのバージョンアップを行う際は、作業中は自動的にメンテナンスモードに切り替わります。通常であればメンテナンスモードは自動的に解除されるのですが、稀に解除されない不具合が生じる場合があります。こちらの解決方法をまとめてみました。 記事を読む

  • 2019/06/03

    片方だけ横幅を設定してfloatする方法

    片方だけ横幅を設定してfloatする方法をご紹介します。横並びの要素で一方だけ横幅を設定したいあなたは、このコンテンツを参考にしてください。2分後にはあなたの希望が形になります。 記事を読む

  • 2019/05/05

    WordPressのテーマを更新する手順

    今回はWordPressのテーマを更新する手順をご紹介します。WordPressのテーマの中には、頻繁にアップデートを行っているテーマが沢山あります。アップデートはテーマの不具合改善などを目的に行われますので、テーマにアップデートがある場合は、早めにテーマを更新しましょう。 記事を読む

  • 2019/05/04

    【WordPress】特定のプラグインが動作するようにREST APIを無効化する方法

    WordPressのREST APIを無効化したらプラグインが動かなくなってお困りではありませんか?このページでは、特定のプラグインが動作するようにREST APIを無効化する方法をご紹介しています。ぜひ、参考になさってください。 記事を読む

コメントを残す

(必須)

CAPTCHA