私たちは高精細な世界に住んでいます。 そして、私たちのほとんどはXNUMX日XNUMX時間以上、さまざまな種類の画面を見ているので、 画像の品質 これらの画面に含まれる文字は非常に重要です。
数年しか利用できませんが、Retinaディスプレイは未来の道です。 Retinaディスプレイの高いピクセル密度により、画像が鮮明で鮮明になります。 そして、誰が素敵で鮮明な画像を愛していませんか？
学ぶ ウェブサイトを作成する Retina 画面との互換性は、Web 開発者にとって重要な資産です。 残念ながら、Retina 対応ディスプレイを使用して Web サイトをユーザーフレンドリーにするための理想的で完璧なソリューションはありません。
そのため、誰かが最も完全な解決策を見つけるのを待つ間、私たちはあなたのウェブサイトを準備するための最良の選択肢のいくつかを見てきました。 そうすれば、すべてのデバイスでRetinaが何らかの形で表示されるようになったときに、迷うことはありません。
しかし、始める前に、時間をかけて見てください WordPressのテーマをインストールする方法, どのように多くのプラグイン私はワードプレスにインストールする必要があります.
それでは、仕事に取り掛かりましょう！
複数の画像ファイルを作成する
基本から始めましょう。 WebサイトのRetinaモードサポートを取得する最も簡単な方法は、 異なる解像度で複数の画像バリエーションを作成する。 つまり、解像度の種類ごとに（つまり、1x）、そのクリップの高解像度バージョン（つまり、2x）を作成する必要があります。
基本的に、同じファイルの複数のバージョンを作成し、WP Retina 2xのようなプラグインまたはretina.jsのようなスクリプトを使用して、各画像サイズの「@ 2x」バージョンを自動的に生成するか、「@ 2x」画像を見つけて表示することができます。各デバイスに対応するサイズ。
同じ画像の複数のバージョンを作成することは、時間のかかるプロセスになる可能性があることは事実です。 残念ながら、これらの画像を自動的に生成する簡単な方法はありません。 しかしながら、 画像をすばやく修復できるPhotoshopプラグインがいくつかあります.
「」のようなプラグイン それをretinize これは、Retinaディスプレイ用にデザインを簡単に最適化できる一連のPhotoshopアクションです。 古いバージョンのPhotoshop（CC以前）を使用している場合は、「 四 これは基本的に現在のPhotoshopGeneratorツールが行うすべてのことを行いますが、古いバージョンのPhotoshopの場合です。
スケーラブルベクターグラフィックス（SVG）
Retinaモードを進める最も簡単な方法は、WebサイトでScalable Vector Graphics（SVG）を使用することです。 SVGは、XMLベースのベクター画像形式です。 名前が示すように、SVG画像はスケーラブルです。つまり、画像を必要なだけ（または小さく）引き伸ばすことができますが、鮮明で鮮明です。 これは、多くの労力をかけずにRetinaモードを実装するための迅速で簡単な方法です。
また読みます： 従来のPNGとJPGの代わりにWebP画像を提供する方法
ただし、WordPressでSVGを使用することにはXNUMXつの欠点があります。 XNUMXつ目は、ベクトル形式であるため、SVGがすべての画像に適しているわけではないということです。 したがって、ロゴやアイコンにはSVGを使用できますが、写真などのファイルには使用できません（あなたのウェブサイトに高解像度の画像を使用したい場合、これは少し苦痛です）。 ただし、シンプルなアイコン、アニメーション、またはイラストを使用する場合は、SVGファイルがRetina互換Webサイトのオプションになることは確かです。
WordPressでSVGを使用することのXNUMXつ目の欠点は、セキュリティ上の懸念から、WordPressと公式に互換性のある形式ではないことです。 SVGファイルは本質的にXMLファイルであるため、これにより次のように開きます。 XMLファイル形式に関連するすべての既知の脆弱性、強制分析、XML外部エンティティ攻撃（XEE）、XMLサービス拒否攻撃（XDoS）攻撃など。
ただし、SVGファイルを安全にするWebサイトのSVGサポートを有効にする方法があります。
WordPressでSVGを安全に有効にする方法
Safe SVG は、WebサイトでSVGファイルのサポートを安全に有効にするためのプラグインです。 このプラグインは、SVGファイルが確実に駆除され、Webサイトに影響を与える可能性のあるXMLの脆弱性を防ぎます。
SVGからWordPressメディアライブラリへのアップロードを許可するMIMEタイプを許可するプラグインは危険であり、Webサイトに害を及ぼす可能性があるため、使用しないでください。 したがって、WordPressでSVG形式を使用したい場合は、安全に使用し、最初に表示されるSVGプラグインをダウンロードしないようにしてください。
を読んで、ブログのコンバージョンを増やしましょう あなたのブログに多くの訪問者を発生さ15コンテンツタイプ
WordPressでRetina互換性を統合するためのいくつかのプラグイン
Retinaと互換性のあるWebサイトをセットアップしようとするときに、作業をはるかに簡単にすることができるRetina互換性のスクリプトとプラグインがいくつかあります。 ただし、前述のように、利用可能なプラグインとスクリプトのほとんどは、高解像度ディスプレイの場合にのみ、画像を高解像度画像に置き換えます。 それらはSVGのようには伸びません。それでも、異なる解像度の複数の画像を作成する必要があります。
1-retina.js
retina.js 高解像度の画像を提供するために最もよく使用されるスクリプトのXNUMXつです。 これは、Retinaディスプレイを備えたデバイスに高解像度の画像を簡単に提供できるようにするオープンソーススクリプトです。
スクリプトは、ページ上の各画像をチェックして、サーバー上にその画像の高解像度バージョンがあるかどうかを確認します。 高解像度のバリアントが存在する場合、スクリプトは標準解像度を高解像度画像と交換します。 これは、WebサイトでRetinaディスプレイの画像を提供する最も一般的な方法のXNUMXつです。
また見なさい： GIF、絵文字、またはミーム：WordPress Webサイトに最適ですか？
2-密
retina.jsと同様に、 密集 は、ピクセル比形式で画像を提供する簡単な方法を提供するjQueryプラグインです。 スクリプトは、初期化の$ .fn.dense（）メソッドを呼び出します。このメソッドは、必要に応じてRetinaモード互換のイメージとして機能する「img」タグを対象としています。
そのため、retina.jsスクリプトのように、すべての画像をそれぞれの高解像度バージョンに置き換えます。
3-WP Retina 2x
後者は、魔法のRetinaイメージジェネレーターに例えることができます。
WP網膜2x High-DPIデバイスに必要な画像ファイルを作成し、それに応じて訪問者に表示するプラグインです。 前のXNUMXつのスクリプトとは異なり、最初の画像とは異なる解像度の画像を生成します。 したがって、異なる解像度で異なる画像を手動で作成することにあまり満足していない場合は、このオプションが適しています。
これでこのチュートリアルは終了です。画像をRetina Ready画像に変換できることを願っています。
プレミアムWordPressプラグインもご覧ください
他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。
ここでは、そのためのプレミアムWordPressプラグインを提供しています。
1。 素晴らしいWordPressの著者リスト
名前が示すように、プラグイン ファンシーワードプレス著者リスト ウィジェットにWebサイトの作成者のリストを表示します。 シンプルなユーザーインターフェイスがあり、 著者の情報を表示する サイドバーで。 作成者ウィジェットをサイドバーにドラッグするだけで、プラグインが作業を実行します。
その主な機能はとりわけあります：可能性 ブログの著者を表示する 新しい訪問者を引き付ける楽しい方法で、サイドバーまたはページに著者リストを表示する機能、 競争を始める ブログの作成者間、レスポンシブレイアウト、ショートコードのサポートなど。
2.簡単な目次
Ce WordPressのプラグイン ユーザーフレンドリーを使用すると、投稿、ページ、およびカスタム投稿タイプに目次を挿入できます。 多くの機能があり、主なものは次のとおりです。
目次の自動管理、タグのサポート、Rankin Mathプラグインのサポート、Gutenbergなどのいくつかのページエディタとの互換性、 Divi, Elementor, WPベーカリー・ページ・ビルダー その他、パブリケーションを表示するページを選択する可能性、特定のページへの目次の自動挿入、その他多数。
それはです WordPressのプラグイン 目次を表示するために必要なものがすべて揃っているフリーウェアですので、最初の選択肢として自由に選んでください。
3。 WooCommerce高度な一括編集
製品カタログを定期的に編集していますか? 製品が 100 個であろうと 10.000 個であろうと、これは WordPressのプラグイン 私の謙虚な意見では、プレミアムは「必須」です: (それが頭に浮かぶ最初の言葉です)。
ほんの数ドルのために、プラグイン WooCommerce Advanced一括編集 人生を楽にし、あなたに途方もない時間を節約します。 それは爆弾であるためらいはありません。
推奨リソース
ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。
- あなたはおそらく知っている5のトラフィックソース
- ケーススタディ：過ちから学ぶためにどのようにコンテンツマーケティング、
- フリーランサーが毎日のスケジュールを必要とする理由
- あなたが成功したブログを作成するのに役立ちます7の側面
まとめ
ここに ！ このチュートリアルは以上です。Webサイト用にRetina対応の画像を作成できるようになることを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログの作成。
提案や意見がある場合は、セクションに残してください commentaires.
...
