モバイルデバイスの使用の増加に注目して、Google は 2015 年 XNUMX 月末以降、ページがモバイル対応になっていない Web サイトにペナルティを課しました。 結果として、あなたのために SEO、Web サイトが大きな画面と小さな画面の両方で適切に表示されることを確認する必要があります。
この記事では、ルールを使用してWebサイトをページに配置する方法を示します @media CSS3の。
「レスポンシブ」と「モバイル互換」という用語は、実際の意味の違いにもかかわらず、しばしば同じ意味で使用されることに注意することが重要です。 Webサイトがすべての画面サイズに対応するために必要な基準を満たしていることを確認するには、それぞれの意味を理解することが重要です。
しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法
それでは、ここにいる理由に戻りましょう。
応答性とモバイル互換
そうでないウェブサイト どちらの応答も対応携帯、はすべての画面で同じように表示されます。つまり、大画面のバージョンはどこにでも表示されます。 小さい画面では、ページを水平方向にスクロールしてすべてのコンテンツを表示する必要があります。 これらの画面をナビゲートするのは困難です。
これらもご覧ください あなたのウェブサイトの外観をカスタマイズする8 WordPressのプラグイン
ウェブサイトは 互換性のあるモバイル モバイルで見られる最低限の要件を満たしているだけで、応答性の高いWebサイトにならない場合。 たとえば、水平方向に移動する必要がない場合、Webサイトはモバイル互換と見なすことができます。 これにより、その要素が小さくなり、区別できなくなります。 次に、その内容を読むためにズームインする必要があります。
彼らの側でウェブサイト 反応する さまざまな画面サイズに完全に適応します。 最小の画面で簡単に表示して使用できるように、要素を再定義します。 これはあなたがあなたのウェブサイトに望むタイプのデザインです。
また私達のを見なさい あなたのウェブサイトに予約フォームを作成する10 WordPressプラグイン
これで、レスポンシブモバイルと互換モバイルの違いがわかりました。 ルールが表示されます @media Web サイトをレスポンシブに更新したり、非常に簡単に作成したりできる CSS3 の WordPressテーマ レスポンシブコンテンツで。
ルール @media CSS3の
テーマをレスポンシブにするには、ルールが必要になります @media CSS3の。 基本的に、特定のタイプ（サイズ）の画面に使用するスタイルを定義できます。 他のCSSルールをネストすることを除いて、別のCSSルール（中括弧付き）のように使用します。
@media media-type（expression）{css-test-selector {property1：value1; property2：value2; }}
この構造では、ルール内の要素 @メディア ときのみ動作 種類・オブ・メディア 正常に検出されたことが指定されました。 選択したメディアのタイプは、ディメンションの観点から特性を指定できます。
発見 WordPressにインターフェイスとユーザーエクスペリエンスを適用する方法
ルール @media Webサイトにアクセスする画面の種類を検出し、この種類の画面に最適なルールを選択します。 すべての主要なブラウザはすでにルールを統合しています @media.
情報のリストは次のとおりです。 クロム , Safari, Firefoxの, IE, Opera et エッジ（Edge）.
ターゲット画面を定義する
変更したい場合 ワードプレスのテーマ 必要に応じて元に戻せるように、後者の CSS のバックアップ コピーを作成してください。
記事もご覧ください FacebookとDisqusのコメントを段階的に読み込む方法
その構造で見たように、画面のタイプを定義するには、転送する必要があります @media ターゲットとする画面のタイプ。 さまざまな種類の画面のリストは次のとおりです。
– を ：すべてのタイプの画面またはで指定された寸法の場合 表現
– screen ：モバイル、タブレット、ラップトップ、デスクトップを問わず、すべての画面用
– 印刷 ：プリンターの場合、印刷可能なページに特定のスタイルが必要な場合
– スピーチ ：スクリーンリーダー用、視覚障害者向けのスタイルが必要な場合。
画面タイプの前に置くことができる演算子もあります。 なので 指定されたものとは異なるタイプの画面のスタイルを表示する、または の 指定した画面にのみスタイルを適用します。 したがって、次のことができます。
@mediaのみ画面
画面サイズのスタイルを定義する
あなたは使用することができます 表現 画面の特性の詳細を提供します。 後 @media 入ります & 式が続きます。 複数の式を使用する場合は、すべてを次のように区切る必要があります。 &。 構造の例を次に示します。
@media only screen and（max-width：640px）{selector-css-example {/ *ここで通常のCSS * /}}
この例では、 最大幅 の値を持ちます 640px。 これは、iPhoneまたは小型のAndroidスマートフォンのサイズの最大画面幅を設定するためのものです。 この種の構造を使用すると、さまざまなデバイスでWebサイトをどのように表示するかを制御できます。 で使用できるディメンションに関連するプロパティのリストは次のとおりです 表現 :
私たちも発見 8 SEOあなたのウェブサイトのSEOを最適化するWordPressプラグイン
– mで、幅 et 最大幅 ：ルールに含まれるスタイルの表示に必要な最小幅と最大幅 @media。 もう1つのピクセルとスタイルは表示されません。
– mで、高さ et 最大高さ ：ルールに含まれるスタイルを表示するために必要な最小および最大の高さ @media。 ほとんどの画面はページを垂直に展開するように設計されているため、プロパティ 分の高さ et 最大高さ ほとんど使用されていません。
一部の端末の画面サイズのリストは次のとおりです。
– iPhone：640px
-IPad：1024px
-タブレット：1366px
-Androidスマートフォン：640px、720px、854px、960px
-Android特大：1024px、1066px
-Windows電話：480
-Windows Phone Large：768px
-老いも若きも：320px
-ウルトラブック/ラップトップ：1366px
-デスクトップとテレビ：1920px
で使用できる他の多くのプロパティがあります 表現。 たとえば、16：9のアスペクト比の画像を表示できるデスクトップまたはテレビ画面をターゲットにしている場合は、次のような構造を使用できます。
@media only screen and（min-width：1920px）and（device-aspect-ratio：16/9）{selector-css-example {/ *通常のCSSはこちら* /}}
より完全なリストと例については、 w3schools et MozillaのDeveloppers.
Webサイトのレスポンシブ機能をテストする
変更または構築するとき ワードプレスのテーマ または、最後にサプライズが好きな場合は、結果をテストして、最終的に応答するかどうかを確認する必要があります。 Google は応答しない Web サイトを監視していることを忘れないでください。
これらもご覧ください ブログにタブを作成するための10 WordPressプラグイン
対象とするすべてのモバイルデバイスがないため、（幸いなことに証券取引所にとって）Webサイトがさまざまな画面にどのように適応するかを確認するためのツールが多数あります。
直接お使いのコンピュータのブラウザにあなたが使用することができます ウィンドウのリサイズChromeブラウザの拡張, ResponsiveResize, ResizeMe ou Firesizer。 以下は、Firefoxにデフォルトで付属するレスポンシブデザインビューのBlogPasCherの画像です。
タスク専用のWebサイトもあります。
このウェブサイトの特徴は、画面サイズを自分で選択できることです。 この Web サイトではフレーム内に Web サイトが読み込まれることに注意してください。 それで、もしあなたの ワードプレスのテーマ はフレーム内に表示されないように設計されているため、ここに表示されない可能性が十分にあります。
iPadのかいま見
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
このWebサイトは、最新のApple、iPad、およびiPhoneデバイスでWebサイトをテストするのに役立ちます。 URLを入力するだけです。 responsepxと同じフレームの問題が発生することに注意してください。
このWebサイトでは、小さな画面や、画面の右側で選択した古いモデルの電話でテストできます。 一部の画面プロパティを構成することもできます。
これは、最も重要ではないにしても、最も重要なテストのXNUMXつです。 バーに住所を入力してクリックするだけです 解析 テストを開始します。 テスト後、ツールはレポートとスコアを表示します。 テストが陽性の場合は、さらに良いことに、Googleによるペナルティはありません。
開発者でない場合は、アドバイスします レスポンシブなWordPressテーマのリスト 開始します。
推奨リソース
また、パートナーやサブスクライバーをより引き付けるのに役立つだけでなく、Webサイトのセキュリティを向上させるのに役立つ他の推奨リソースも見つけてください。
- ワードプレスのカスタムリンクのコースを作成する方法
- ブログにカスタマーレビューを追加する5 WordPressプラグイン
- WooCommerceのクーポンのための運命の輪を作る方法
- ブログのベストディールとクーポンを発見
まとめ
ここに ！ ルールを使用してWebサイトまたはWordPressテーマを応答性の高いものにする方法について知っておくべきことはすべて知っています @media CSS3の。 あなたにとって大切な、またはあなたが好むWordPressテーマを見逃した場合は、セクションにリンクを残してください commentaires 以下。
しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
私たちもあなたを招待します さまざまなソーシャルネットワークで共有する.
...
