The Right Image Size for Your Website: 10-Minute Monday (日本語)

ビデオでは、どのようなウェブサイトプロジェクトにも適した画像サイズを見つける方法を紹介しています

え?

もしあなたが多くの人と同じように、初めてWordPressテーマをダウンロードしたとき、画像はどうなっているのだろうと思いました。

まず、テーマのデモで使用されていた画像サイズを調べることから始めれば、すぐにデモよりも優れたサイトを手に入れることができるでしょう。なぜなら、あなたやあなたのビジネスを最もよく表す画像があるからです。

適切な画像サイズ

私がクライアントのためにWordPressのウェブサイトを構築しているとき、通常4つの異なるサイズの画像が必要になります。

How To Find the Right Size

「表示」の下にある「メディア設定」の情報は、以下のことを教えてくれるので、まず始めてみるといいでしょう。

  • テーマのサイドバーに最適な画像のサイズ (300)
  • …しかし、HOMEページ/フロントページのヘッダー画像やページヘッダーのバナーの寸法はわかりません。

    トップページ/フロントページのヘッダー画像のサイズは、APPEARANCEで確認できます。 APPEARANCE -> CUSTOMIZE -> FRONT PAGE HEADER IMAGEの中にヘッダー画像のサイズがあります。

    この例では、サイズは1600 px X 1050 pxです。

    ページ ヘッダー バナー

    このサイズを見つけるのは少し難しいです。

    例えば、ショーケース・プロのTEAMページのデモ ヘッダー バナーは、HOME/フロント ページ ヘッダー イメージよりもかなり薄いですが、テーマのドキュメントには、TEAMページ ヘッダー バナーをどのようなサイズにすればよいかは記載されていませんでした。

    任意のページ ヘッダー バナー画像のサイズを見つけるには

    Firefox ブラウザにテーマのデモの URL を入力します。 Firebug を使用して、使用された正確な画像サイズの寸法を取得します。

    1. Web ページ上で右クリック / Control + クリック (Mac)
    2. View Page Info
    3. Choose Media
    4. Scroll down to Background
    5. ヘッダー バナーと同じ画像を選択する
    6. Dimensions: テーマのデモで使用されている正確な画像サイズが表示されます

    TEAMのヘッダーバナーのサイズは、HOMEページのヘッダーバナー(1600px X 1050px)と同じ寸法ですが、より薄く表示されます。

    以下のビデオで、Firefox を使用して正しい画像サイズを見つける方法をご覧ください。 すべてのヘッダーバナー画像が同じサイズではありません

    BLOGのヘッダーバナーを確認したところ、TEAMのヘッドバナーと同じサイズではないことに驚きました。

    このテーマのヘッダー バナーは、ウェブサイト全体で一貫した外観を保つためにサイズが変更されます。

    あなたのデザインの課題は、細長いスペースに似合う画像を見つけることです。

    「正しい」ブログ記事の画像サイズ

    これらの同じ手順を使用して、テーマのデモブログ記事の画像サイズを見つけます。

    • ウェブページ上で右+クリック/Control+クリック(Mac)
    • 「ページ情報を見る」を選択
    • 「メディア」を選択
    • 「背景」までスクロールダウン
    • 「ヘッダーバナーと同じ画像」を選択
    • 「寸法。 テーマのデモで使用されている正確な画像サイズが表示されます
    900 px X 600 px

    Final Tip

    Web用の画像は、72dpiでRGBにしてください。

    印刷用の画像は、300dpiでCMYKにしてください。

    テーマのデモで、Firefoxを使って正しい画像サイズを探すところを見る

    画像に関するヘルプが必要ですか?

    10-Minute Mondayでは、デザイナーではない方でもプロとしてのイメージを高めたい方のために、ヒントやコツをご紹介しています。

    電話やメールでも受け付けています。 Contact

    Join Me Live on My Next 10-Minute Monday

    次回の「10-Minute Monday」への招待状と、ウェブサイトやプロジェクトで使用できる素晴らしい写真のための私のお気に入りの無料リソースのリストを受け取ることができます。

    セッションは短く、1つのトピックに集中しています。

    また、ライブなので質問もできます。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です