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

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

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

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

更新が面倒なHTMLサイトお持ちではありませんか?

ADhttp://wordpress-supporters.com/wordpress-ka/

そのサイト、Wordpressを導入して更新しやすくしちゃいましょう!
Wordpress請負人なら、既存サイトでもWordpress化することが可能です。
見積もり無料、実績100件以上、サポート充実、再現性バツグン。

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

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

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

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

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

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

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

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

2018-05-16
知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法
レスポンシブデザインでは必須!親要素に画像が収まるようにする方法 レスポンシブデザインでサイトを構築するとき、必ず必要になってくるのが、親要素に合わせた画像の拡大縮小処理です。 レスポンシブデザインでは、要素がデバイス内に収まるようにしなければなりません。 当然、画

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

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

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

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

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

2018-05-17
レスポンシブデザインでテーブルを横スクロールさせる方法
レスポンシブデザインでテーブルを横スクロールさせる機会が多い レスポンシブデザインでサイトを構築していると、スマホ表示の際、レイアウトに困ってしまうテーブルが出てきます。 複雑な料金表、複雑なスペック表などですね。 行や列が多いテーブルはレスポンシブデザインの場合、

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

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

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でレスポンシブデザインを作成するときに役立つコンテンツをまとめてみました。

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

更新が面倒なHTMLサイトお持ちではありませんか?

ADhttp://wordpress-supporters.com/wordpress-ka/

そのサイト、Wordpressを導入して更新しやすくしちゃいましょう!
Wordpress請負人なら、既存サイトでもWordpress化することが可能です。
見積もり無料、実績100件以上、サポート充実、再現性バツグン。

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

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

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

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

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

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

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

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

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

  • 2015-03-14

    【SEO対策】text-indent:-9999pxを使わずテキストを画像に置換する方法

    text-indent:-9999pxを用いて、テキストを画像に置換する手法をご存知でしょうか?この手法、便利なのですが、SEO的に不利だと言われています。そこで今回は、text-indent:-9999pxを使わずテキストを画像に置換する方法をご紹介いたします。 記事を読む

  • 2017-11-23

    WordPressで設定しているアイキャッチ画像を一括削除する方法

    Wordpressで設定しているアイキャッチ画像を一括削除する方法をご紹介します。コピペだけで行える方法です、興味のある方は参考にしてください。 記事を読む

  • 2016-02-15

    GOOGLEマップをレスポンシブに対応させる方法

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

  • 2017-11-23

    WordPressで親カテゴリー直下の子カテゴリーのみを取得する方法

    WordPressで親カテゴリー直下の子カテゴリーのみを取得する方法をご紹介します。カテゴリーページで、そのカテゴリーに属する直下のカテゴリーだけをリストアップしたい場合、このコンテンツはお役に立てます。参考にしてください。 記事を読む

  • 2015-10-07

    WordPress管理画面のあなたのプロフィールで項目を追加したり削除する方法

    WordPress管理画面のあなたのプロフィールで項目を追加したり削除する方法をご紹介します。プロフィールの項目を増やしたい方や減らしたい方は参考にしてください。コピペだけで3分後にはプロフィールの項目を自由自在にカスタマイズできてしまいます。 記事を読む

コメントを残す


(必須)