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

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

レスポンシブデザインの構築で役立つコンテンツをまとめました。 レスポンシブデザインを構築する時、大抵の場合で必 ...

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

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

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

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

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

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
レスポンシブ対策!電話番号リンクをスマホの場合だけ有効にする方法
電話番号リンクを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-10-10

    まとめて良かった!WEBデザインするときに参考になるデザインまとめサイトのまとめ

    WEBデザインの参考になる21の「デザインまとめサイト」をご紹介します。WEBデザインをする方には、役立つコンテンツかな~と勝手に思い込んでいます。WEBデザインの参考にしてください。 記事を読む

  • 2017-11-23

    データベースのパスワードを変更したらWordPressが表示されなくなった時の対処法

    何かの理由でデータベースのパスワードを変更したら、サイトが表示されなくなった!管理画面にもログインできない!そんな不具合でお困りではありませんか?データベースのパスワードを変更したら、WordPressのファイルも修正しなければなりません。解決方法をご紹介いたします。 記事を読む

  • 2015-02-04

    WordPress投稿画面の「ここにタイトルを入力」を別の文章に変更する方法

    WordPress投稿画面の「ここにタイトルを入力」を別の文章に変更する方法をご紹介します。投稿画面のタイトルを入力する項目に薄く表示されている文章を変える方法です。参考にしてください。 記事を読む

  • 2015-01-17

    「Contact Form 7」のフォームをテーマファイルに直接埋め込む方法

    「ContactForm7」のフォームをテーマに直接埋め込む方法をご紹介します。「ContactForm7」はショートコードでメールフォームを設置しますが、テーマファイルにショートコードを記述しても正常に動作しません。テーマファイルにメールフォームを直接記述したい方は、今回ご紹介する方法を利用してください。 記事を読む

  • 2015-03-11

    【WordPress】コピーライトの年号を自動更新する

    作成したサイトのフッターにコピーライトを記述する機会は多いと思います。WordPressなら、簡単なカスタマイズでコピーライトの年号を自動更新することができるのです。今回はそんなカスタマイズをご紹介します。 記事を読む

コメントを残す

(必須)

CAPTCHA