アイキャッチとサムネイルは別々にアップロードした方が自然な表示になる

更新
2013年05月05日(日) 21:05

アイキャッチとサムネイルを別々にアップロードした場合の具体例です。それぞれの画像ができるだけ自然に表示されるようにする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. アイキャッチ画像とサムネイル画像の両方とも自然な状態で表示する方法です。

  2. アイキャッチ画像とサムネイル画像を別々に用意してアップロードするだけです。

メリット・デメリット

  1. アイキャッチ画像とサムネイル画像のサイズを活かせます。

  2. 画像を2つ用意するので、サムネイル画像自動生成時よりも手間が増えます。

別々にアップロードする場合の具体例

  1. サムネイル画像の見た目のデフォルトサイズは100x100です。

  2. アイキャッチ画像を960x300でアップロードし、同時にサムネイル画像を100x100で自動生成しても縦横の比率が保たれるため、右の画像のように100x31のサムネイルが作成されます。

    eyecatcherデフォルトアイキャッチ画像
  3. しかし、それがカルーセル内などで表示されると縦も100になるように引き伸ばされます。たとえば、デフォルトアイキャッチ画像をサムネイルとして表示させると右の画像のようになります。下にオリジナル画像を載せているので右の画像がネコだと分かりますが、初見の方にはぱっと見では何か分からないでしょう。

    eyecatcherデフォルトアイキャッチ画像
    eyecatcherデフォルトアイキャッチ画像
  4. 130304relate-eyecatcher-4.png

    サムネイル同時に作成するにチェックを入れなければ、たとえば entry-9.jpg というファイル名の画像をアップロードする際に entry-9s.jpg というファイル名のサムネイル画像が自動生成されません。右の参考画像ではチェックがついていますので、それをクリックで外します。

    しましまネコが葉っぱと前足でかくれんぼ
  5. たとえば、サムネイルを同時に作成せずに上の画像(entry-9.jpg)をアップロードし、別の右画像(entry-9s.jpg)をアップロードします。カルーセルや最新記事一覧では右画像が表示され、blog-entry-9.htmlのアイキャッチ画像には上の画像が表示されます。

    しましまネコが葉っぱと前足でかくれんぼサムネイル
  6. ちなみに、上の画像(entry-9.jpg)をアップロードする際にサムネイル画像を自動生成すると、100x100のサイズに合わせて右画像のようになります。アイキャッチ画像とサムネイル画像は別々にアップロードした方が、それぞれの画像が自然に表示されるのが一目瞭然です。

    しましまネコが葉っぱと前足でかくれんぼ

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

  4. 作者覚書:記事作成~公開まで40分。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)