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

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

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

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

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

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

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

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

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

2017-07-22
【レスポンシブサイト】デバイスの横幅で画像を切り替える方法
デバイスの横幅で画像を切り替える方法 レスポンシブサイトなどで、PCとスマホで画像を切り替えたい(違う画像を表示させたい)ことがあるかと思います。 それぞれのデバイスで表示させたい画像を両方書き込んでおき、CSSの【display:none;】などで表示させる画像を切

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

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

2017-07-21
レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策のまとめ
スマホサイトで要素が画面に収まらない問題 レスポンシブサイトを構築していると、スマホサイトで要素が画面に収まらないという問題に一度や二度はぶつかるものです。私も、制作の過程で必ず1回はスマホの画面に要素が収まらず、横スクロールが表示されてしまい、毎回閉口していました。

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

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

2016-09-18
背景画像をレスポンシブに対応させる方法
レスポンシブと背景画像の関係 レスポンシブサイトで背景画像を利用してみると、困ってしまう事があります。 背景画像はその画像の高さを表示させるエリアに指定しないと画像の全てが表示されませんが、高さを指定してしまうと、デバイスの横幅が変った時に高さ分の余白や画像切れが生じ

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

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

2016-09-10
WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法
WordPressにYOUTUBE動画を埋め込む方法 まずは、YOUTUBEの動画をWordPressサイトに埋め込む方法をご紹介します。 YOUTUBEの動画を埋め込む時は、サイズや詳細な設定をすることもできるのですが、 今回は最も単純な方法をご紹介します。

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

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

2016-07-20
レスポンシブ対策!電話番号リンクをスマホの場合だけ有効にする方法
電話番号リンクをスマホで有効、PCで無効にしたい! レスポンシブサイトの案件でスマホユーザーのユーザビリティを考え、電話番号に【<a href=”tel:電話番号″>】とリンクを設定することは非常に多いと思います。 ですが、このリンクをPC表示でクリックしてしま

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

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

2016-02-15
GOOGLEマップをレスポンシブに対応させる方法
GOOGLEマップをレスポンシブに対応させる GOOGLEマップを埋め込んでいるサイトを最近よく目にします。 簡単に地図をサイト上に埋め込めるので非常に便利ですよね。 地図の埋め込み=GOOGLEマップと言っても良いのかもしれません。 ただ、1点だけ残念な部分もあ

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

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

2018-03-08
【WordPress】PCとスマホで表示する要素を自在に操る条件分岐
レスポンシブデザインのWEBサイトの場合、以下の様にPCとスマホで表示する要素を代えたいケースが多くあります。 ・PCとスマホで表示させる要素を別々にする。 ・PCでは要素を表示させるが、スマホでは要素を非表示にする。 ・PCでは要素を非表示にするが、スマホでは要素を表

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

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

2016-02-15
スマホを横向きにした時、WEBサイトの文字サイズを勝手に変更させない方法
スマホの縦向きと横向きで文字サイズを勝手に変更させない方法 レスポンシブサイトを制作した時、スマホで表示確認をすると、デバイスの縦向きと横向きのときで文字サイズが勝手に変更されるのに気が付くかと思います。 スマホを縦向きから横向きに変えると、文字サイズが縦向きの時より

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

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

2016-02-14
CSSだけでHTMLのbrタグを無効にする方法
スマホ表示だけbrタグを無効にしたい。 レスポンシブサイトの場合、スマホサイトだけbrタグを無効にしたいと思うことが少なからずあるかと思います。 PCでは読みやすい改行になっているけど、スマホで見ると変な箇所で改行されてしまい、非常に読みにくいと感じることは決して少な

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

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

2016-02-09
【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法
iPhoneで検索フォームなどを利用すると画面が拡大される理由とは? とある案件でクライアント様からご希望をいただきました。 WEBサイトの検索フォームを利用するとき、iPhoneだと勝手に画面が拡大される。 勝手に拡大しないようにしてほしい! やり方が分から

まとめ

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

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

この記事が気に入ったら【いいね】しよう!

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

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

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

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

詳細を確認する

著者:takaya kondo

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

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

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

  • 2015-01-07

    WordPress のテーマを削除する方法

    WordPressのテーマはクオリティの高いものが多くあるのですが、色々とテーマを代えていると、いつしかインストールされているテーマの数も増えてしまいます。テーマが多いと管理も面相になりますし、データベース容量も食ってしまいます。テーマは定期的に削除するクセを付けましょう。今回は、テーマの削除方法をご紹介し 記事を読む

  • 2015-01-16

    公開日時を基準に指定日数内の記事にNEWと表示する方法

    公開日時を基準に指定日数内の記事にNEWと表示する方法をご紹介します。新着記事の一覧を表示しているときなど、新しい記事にNEWと表示したいと考えたことはありませんか?WordPressなら公開から指定した期間以内の記事にNEWと簡単に表示することができます。 記事を読む

  • 2015-01-29

    WordPressの投稿エディターから消えたスクロールバーを再表示させる方法

    WordPressの投稿エディタから消えたスクロールバーを再表示させる方法をご紹介します。WordPress4.0から最大行表示エディターという機能が実装され、ブラウザの高さ一杯にエディタが広がっていく仕様(スクロールバーが表示されない)になりました。使いにくいと感じている方は、スクロールバーを再表示させましょう。 記事を読む

  • 2017-11-23

    【Regenerate Thumbnails】サムネイル画像を一括でリサイズする方法

    プラグイン【Regenerate Thumbnails】を使って、サムネイル画像を一括でリサイズする方法をご紹介します。画像をサイズを追加したときなど、アップロード済の画像を一括でリサイズできるので便利です。図入りで使い方を解説してみました。参考にしてください。 記事を読む

  • 2015-02-24

    WordPressサイトに前後記事へのリンクを表示させる方法

    WordPressで構築したサイトに前後記事へのリンクを表示させる方法をご紹介します。記事ページの下部などでよく見かける「前の記事」「次の記事」といったナビゲーションリンクです。1分で表示できますので、参考にしてください。 記事を読む

コメントを残す


(必須)